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随 着 互联 网 技术 的 高 速 发 展 和 互联 网 的 日 益 普 及 ,网 站 已 成 为 企业 在 
互联 网 上 进行 网 络 营销 和 形象 宣传 的 平台 , 越 来 越 多 的 公司 或 企业 通过 建 
立 自己 的 网 站 来 宣传 公司 的 产品 ,发掘 潜 在 的 客户 和 商机 ,提高 自身 的 竞争 
力 。 本 书 将 站 在 网 站 建设 行业 的 角度 ,以 一 个 完整 的 动态 网 站 项 目 为 载体 ， 
结合 软件 工程 思想 和 网 站 开发 的 工作 过 程 为 读者 讲授 网 站 开发 的 技术 
技能 。 

本 书 与 其 他 网 站 开发 类 书籍 相 比 ,突出 了 以 下 几 点 创新 。 

(1) 内 容 创 新 

本 书 的 内 容 与 其 他 网 站 开发 类 书籍 内 容 相 比 ,突出 了 创新 性 。 本 书 将 以 
一 个 完整 的 动态 网 站 项 目 为 载体 ,并 按照 软件 工程 的 思想 划分 功能 模块 ,形成 
典型 的 工作 任务 ,让 读者 在 完成 任务 的 过 程 中 学 习 网 站 开发 的 技术 技能 。 

(2) 内 容 组 织 形式 创新 

本 书 内 容 完 全 按照 网 站 建设 行业 的 工作 过 程 进行 编排 ,在 每 个 任务 中 ， 
强调 能 力 目 标 和 知识 目标 ,图 文 并 茂 地 体现 了 开发 的 过 程 ,同时 根据 每 个 任 
务实 际 情况 适时 插入 知识 点 进行 讲解 ,让 读者 在 基于 教材 的 学 习 与 实践 中 
提升 自身 的 设计 与 开发 水 平 ,同时 让 读者 “ 零 距 离 ” 接 触 网 站 开发 流程 。 

(3) 配套 服务 创新 

全 书 配 套 相关 教学 资源 ,并 提供 整套 无 错误 、 可 运行 的 项 目 案例 源 代 
码 , 并 可 根据 读者 的 要 求 有 偿 扩展 教材 项 目的 功能 模块 。 另 外 ,为 方便 读者 
对 本 书 的 使 用 ,本 书 建立 了 教学 资源 网 站 (http://phpwebsite. sj5u. xyz) 和 
QQ 交流 群 (513112309)。 

(4) 实用 性 强 

本 书 所 用 的 网 站 项 目 为 编者 亲自 设计 与 开发 .能 直接 投入 商用 ,已 使 用 该 
系统 为 社会 众多 公司 和 企业 设计 开发 网 站 ,具有 很 强 的 实用 性 和 商用 价值 。 

本 书 是 由 广东 省 惠州 经 济 职业 技术 学 院 林 龙 健 和 李 观 金 主 编 。 林 龙 健 
负责 编写 任务 3 一 任务 7, 李 观 金 负责 编写 任务 1 和 任务 2, 以 及 任务 8 一 任 
务 10。 

由 于 编者 水 平 有 限 , 书 中 难免 存在 不 足 之 处 , 敬 请 广大 读者 批评 指正 。 


编 者 
2016 年 11 月 
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。 能 够 熟悉 运用 动态 网 站 相关 知识 与 客户 进行 业务 沟通 与 交流 ,培养 学 生 网 站 建设 行 
业 的 业务 能 力 。 

。 掌握 网 站 建设 行业 网 站 开发 概况 及 工作 过 程 ,培养 学 生 形 成 工程 化 的 思维 习惯 。 
(SA 知识 目标 

。 了 解 什么 是 动态 网 站 。 

。 了 解 建立 动态 网 站 的 目的 。 

。 熟悉 建立 动态 网 站 的 流程 。 

。 了 解 建 立 动态 网 站 的 原则 。 

。 了 解 建立 动态 网 站 的 技术 。 


-入 
三 和 任务 描述 

本 次 任务 主要 是 在 了 解 建立 网 站 的 目的 、 原 则 、 技 术 的 基础 上 ,分 析 目 前 网 站 建设 行业 
的 动态 和 掌握 建立 动态 网 站 的 流程 ,同时 根据 编者 提供 的 获取 网 站 订单 的 途径 进行 实践 。 


六 情境 导入 

小 李 是 刚 入 职 问 道 茶具 有 限 公司 的 营销 人 员 , 他 的 主要 工作 是 开拓 本 公司 茶具 销售 业 
务 ,于 是 小 李 开 始 思考 如 何 推广 公司 产品 。 小 李 灵 机 一 动 , 想 到 了 一 个 好 主意 : 现在 互联 网 
这 样 发 达 , 为 什么 不 给 公司 做 一 个 动态 网 站 呢 ? 这 样 就 可 以 把 产品 相关 图 文 信息 放 到 
Internet 上 去 宣传 推广 了 。 于 是 ,小 李 把 自己 的 想法 向 公司 领导 做 了 汇报 ,得 到 了 公司 领导 
的 肯定 。 在 朋友 的 介绍 下 找到 了 你 ,而 你 目前 正 是 某 网 络 科技 有 限 公 司 的 业务 经 理 , 此 时 ， 
一 个 网 站 建设 的 订单 就 产生 了 。 

经 过 和 小 李 多 次 沟通 了 解 到 .小 李 和 希望 访问 者 能 在 网 站 上 了 解 到 公司 的 发 展 情况 ,能 看 
到 产品 详细 的 图 文 介绍 和 公司 新 闻 动 态 , 另 外 .还 需 具 有 访问 留言 .在线 QQ 咨询 .查看 联系 
方式 等 功能 以 加 强 与 访问 者 的 互动 ,发 掘 潜在 的 客户 ,同时 希望 在 网 站 的 底部 有 友情 链接 一 
栏 ,这 样 有 利于 网 站 的 推广 与 优化 。 

通过 以 上 的 情境 片段 ,有 些 读者 可 能 希望 了 解 如 下 内 容 : 


~ 
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(1) 什么 是 动态 网 站 ? 

(2) 建立 动态 网 站 的 目的 是 什么 ? 
(3) 建立 动态 网 站 的 流程 是 怎样 的 ? 
(4) 建立 动态 网 站 有 什么 原则 ? 
(5) 建立 动态 网 站 的 技术 有 哪些 ? 
以 下 将 逐一 说 明 。 


1.1 什么 是 动态 网 站 


动态 网 站 是 由 动态 网 页 所 构成 的 。 所 谓 动 态 网 页 ,是 指 与 静态 网 页 相对 的 一 种 网 页 编 
程 技术 。 静 态 网 页 是 随 着 HTML 代码 而 生成 的 ,页 面 的 内 容 和 显示 效果 基本 上 不 会 发 生 
变化 。 而 动态 网 页 则 不 然 ,页 面 代码 虽然 没有 变 , 但 是 显示 的 内 容 是 可 以 随 着 时 间 、 环 境 或 
者 数据 库 操作 的 结果 而 发 生 改变 的 。 请 读者 注意 ,不 要 将 动态 网 页 和 页 面 的 内 容 是 否 有 动 
感 混为一谈 。 这 里 说 的 动态 网 页 ,与 网 页 上 的 各 种 动画 、 滚 动 字幕 等 视觉 上 的 动态 效果 没有 
直接 关系 ,动态 网 页 可 以 是 纯 文字 内 容 , 也 可 以 是 包含 各 种 动画 的 内 容 , 这 些 只 是 网 页 具体 
内 容 的 表现 形式 ,无 论 网 页 是 否 具有 动态 效果 ,只 要 是 采用 了 动态 网 站 技术 形成 的 网 站 都 可 
以 称 为 动态 网 站 。 

总 之 ,动态 网 页 是 基本 的 HTML 语法 规范 与 PHP、ASP、JSP、ASP. NET 等 高 级 程序 
设计 语言 ,数据库 编程 等 多 种 技术 的 融合 ,以 实现 对 网 站 内 容 和 风格 的 高 效 动态 和 交互 式 
的 管理 。 因 此 ,从 这 个 意义 上 来 讲 , 凡 是 结合 了 HTML 以 外 的 高 级 程序 设计 语言 和 数据 库 
技术 进行 的 网 页 编程 技术 形成 的 网 站 都 是 动态 网 站 。 


12 建立 动态 网 站 的 作用 


动态 网 站 是 企业 在 互联 网 上 展示 形象 的 门户 ,是 企业 开展 电子 交易 的 基地 ,设计 制作 一 
个 优秀 的 网 站 是 企业 成 功 迈 向 互联 网 的 第 一 步 。 在 当今 的 互联 网 时 代 , 一 个 企业 没有 自己 
的 网 站 就 像 一 个 人 没有 住址 ,或 一 个 商店 没有 门脸 。 因 此 ,建设 动态 网 站 具有 提高 竞争 力 、 
树立 企业 形象 ,发布 商业 信息 、 推 广 宣 传 产品 、 回 答 用 户 疑 问 、 提 供 便捷 咨询 服务 、 发 布 公 司 
新 闻 动态 ,收集 客户 反馈 信息 等 作用 ,当然 还 有 其 他 的 作用 ,但 是 无 论 怎样 ,站 在 企业 的 角度 
去 分 析 ,建立 动态 网 站 的 根本 作用 就 是 为 了 展示 自我 与 发 展 自我 。 


13 动态 网 站 的 开发 流程 


一 个 动态 网 站 究竟 是 怎样 开发 出 来 的 呢 ? 目前 很 多 网 站 开发 类 的 书籍 ,第 一 步 就 讲解 
如 何 编写 页 面 代 码 设计 网 站 页 面 或 者 使 用 Dreamwerver 工具 创建 站 点 等 种 种 做 法 ,从 网 站 
建设 企业 上 看 ,这 些 做 法 都 是 片面 的 ,没有 体现 网 站 建设 企业 的 工作 过 程 。 下 面 编者 将 从 十 
2 
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个 环节 以 通俗 易 懂 的 语言 为 读者 介绍 一 个 动态 网 站 在 网 站 建设 企业 中 的 “生产 ”全 过 程 , 具 
体 如 图 1-1 所 示 。 





业务 员 或 业务 经 理 取得 网 站 建设 订单 
] 
相关 人 员 与 建站 客户 进行 充分 的 沟通 ， 确 认 网 
一 一 一 一 一 一 一 
网 页 设计 师 (美工 ) 设计 网 站 的 版 面 图 
] 
客户 确认 版 面 后 ， 网 页 设计 师 利 用 相关 技术 进行 切 图 ， 形 成 Web 页 夯 
| 
网 站 程序 员 【〈 网 站 工程 师 ) 根据 需求 设计 数据 库 
网 站 程序 员 ( 网 站 工程 师 ) 开发 网 站 后 台 
| 
网 站 程序 员 (网 站 工程 师 } 对 网 站 前 、 后 台 进行 整合 形成 整套 网 站 
| 
网 站 测试 人 员 对 网 站 进行 测试 
| 
发 布 网 站 
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图 1-1 


环节 一 : 业务 员 或 业务 经 理 取得 网 站 建设 订单 

目前 ,大 部 分 的 网 站 建设 企业 都 设 有 业务 部 ,主要 是 负责 开拓 网 站 建设 业务 。 那 么 , 业 
务 员 是 通过 什么 途径 获取 业务 ? 根据 编者 从 事 网 站 设计 与 开发 的 多 年 经 验 , 简 要 总 结 以 下 
几 点 。 

(1) 通过 人 际 关 系 , 如 身边 的 同事 朋友、 亲戚 .校友 等 。 成 立 网 站 建设 公司 初期 ,相当 
一 部 分 的 业务 来 源 于 此 种 方式 ,因此 ,作为 一 名 业务 员 , 大 部 分 时 间 在 外 面 跑 ,多 结交 朋友 ， 
不 断 扩大 自己 的 交际 圈 , 这 样 有 利于 业务 的 开展 。 

(2) 利用 互联 网 手段 发 布 宣传 信息 ,如 你 的 QQ 或 微 信 亲友 群 . 校 友 群 ,行业 交流 群 等 。 
通过 此 种 方式 关键 在 于 坚持 发 信息 ,尽管 信息 接收 对 象 目前 还 没有 建立 网 站 的 需要 ,但 是 你 
的 坚持 ,可 以 使 信息 储存 在 接收 对 象 的 潜意识 里 ,形成 了 一 种 习惯 ,日 后 若 需 要 制作 网 站 时 ， 
可 能 第 一 时 间 会 想起 你 。 当 然 还 可 以 到 论坛 . 微 博 、 地 方 门户 网 站 发 布 推广 宣传 信息 。 
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(3) 通过 电话 营销 方式 开展 业务 。 这 种 方式 虽然 传统 ,但 是 试想 ,如 果 打 100 个 电话 产 
生 一 个 客户 ,从 成 本 的 角度 分 析 , 那 也 相当 可 观 了 。 

(4)“ 跑 ”业务 。 采 用 这 种 方式 要 注意 切忌 盲目 ,出 发 前 应 制订 计划 ,确定 做 网 站 的 潜在 
对 象 ,这 样 效率 比较 高 ,比如 商业 写字 楼 、 工 业 园区 等 。 

(5) 做 网 络 推广 。 在 网 络 推广 方面 ,做 关键 词 的 比较 多 ,其 中 一 种 方式 是 做 关键 词 优 
化 ,这 种 方式 花 的 时 间 比 较 长 ,见效 比较 慢 ,但 是 节省 成 本 ; 另 一 个 方式 是 在 搜索 引擎 类 的 企 
业 直 接 做 关键 词 推广 服务 ,通过 这 种 方式 ,只 要 关键 词 设置 合理 ,见效 非常 快 ,但 是 推广 的 成 
本 比较 大 。 

环节 二 : 相关 人 员 与 建站 客户 进行 充分 的 沟通 ,确认 网 站 需求 

在 该 环节 中 ,相关 人 员 包 括 网 页 设计 师 、 网 站 程序 员 等 。 在 沟通 的 过 程 中 ,不 同 的 客户 
对 网 站 的 了 解 程序 不 同 , 应 做 好 不 同 的 应 对 方案 。 如 遇 到 对 动态 网 站 了 解 甚 少 的 客户 ,可 以 
结合 网 站 演示 ,使 用 通俗 易 慌 的 语言 进行 沟通 ,同时 记录 用 户口 中 的 描述 信息 ;如 遇 到 对 动 
态 网 站 有 一 定 了 解 的 客户 ,可 以 适当 使 用 动态 网 站 专业 术语 进行 沟通 以 便 更 好 地 满足 用 户 
的 需求 ,在 沟通 的 过 程 中 做 好 用 户 对 将 建立 的 网 站 的 功能 描述 的 记录 。 通 过 充分 的 沟通 
交流 后 ,应 进一步 对 所 取得 的 信息 进行 加 工 与 提炼 ,最 终 形成 网 站 的 需求 (建议 形成 用 户 
需求 说 明文 档 ), 并 再 次 与 客户 确认 需求 ,客户 认可 后 ,表示 该 环节 结束 并 进入 下 一 个 
环节 。 

环节 三 : 网 页 设计 师 ( 美 工 ) 设 计 网 站 的 版 面 图 

该 环节 的 主要 任务 是 网 页 设计 师 根据 用 户 的 需求 搜集 相关 素材 设计 网 站 版 面 , 设 计 完 
成 后 ,递交 给 客户 查看 , 若 客户 对 网 站 版 面 认可 或 满意 , 则 进入 下 一 环节 ; 若 客户 对 设计 出 来 
的 版 面 效果 不 满意 ,网 页 设计 师 则 需 耐 心 与 客户 沟通 交流 后 ,更 改 或 重新 设计 版 面 , 直 至 客 
户 认可 或 满意 。 

对 于 该 环节 ,有 些 读者 可 能 不 理解 ,为 什么 要 先 设 计 版 面 ? 主要 原因 是 为 了 让 客户 看 到 
预期 的 效果 并 确认 版 面 ,确认 版 面 后 .网 页 设计 师 便 可 按照 版 面 图 利用 相关 技术 进行 切 图 ， 
形成 Web 页 面 ,这 样 可 大 大 提高 工作 的 效率 。 另 外 一 个 原因 是 网 站 开发 完成 后 ,车 用 户 要 
求 大 量 修改 或 要 求 重新 设计 ,本 阶段 产生 的 版 面 图 可 以 作为 凭据 ,因为 在 本 环节 中 只 有 客户 
确认 了 版 面 才能 进行 下 一 个 环节 的 工作 。 当 然 ,经 双方 协商 同意 后 可 以 满足 客户 重新 设计 
或 修改 的 要 求 , 因 为 大 量 的 修改 或 重新 设计 是 要 花费 成 本 的 ,根据 编者 多 年 的 经 验 ,建议 在 
客户 认可 版 面 后 形成 相关 的 文字 约定 ,并 要 求 客户 签字 确认 。 

环节 四 : 客户 确认 版 面 后 ,网 页 设计 师 利 用 相关 技术 进行 切 图 ,形成 Web 页 面 

在 前 一 个 环节 ,主要 是 形成 网 站 的 整套 版 面 图 ,而 在 本 环节 则 是 利用 相关 知识 技术 
(HTML 语言 .DIV 十 CSS 网 页 布局 技术 、JavaScript 等 ) 形 成 整套 网 站 的 Web 页 面 ,在 网 站 
建设 行业 ,通常 叫 作 * 切 图 ”, 该 环节 形成 的 结果 是 与 版 面 图 一 致 的 静态 网 页 。 

环节 五 : 网 站 程序 员 ( 网 站 工程 师 ) 根 据 需求 设计 数据 库 

网 页 设计 师 把 整套 网 站 的 Web 页 面 递 交 给 程序 员 ( 网 站 工程 师 ) 后 ,网 站 程序 员 ( 网 站 
工程 师 ) 便 根据 功能 需求 做 E-R 分 析 , 从 而 形成 数据 的 逻辑 结构 ,进而 形成 数据 表 并 在 数据 
库 服务 器 上 实施 ,该 环节 可 与 环节 四 同步 进行 。 

环节 六 : 网 站 程序 员 ( 网 站 工程 师 ) 开 发 网 站 后 台 

数据 库 设计 完成 后 ,网 站 程序 员 ( 网 站 工程 师 ) 根 据 功 能 需求 ,利用 动态 网 站 开发 技术 逐 
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一 开发 网 站 后 台 功 能 模块 ,最 后 形成 网 站 后 台 。 

环节 七 : 网 站 程序 员 (网 站 工程 师 ) 对 网 站 前 、 后 台 进 行 整合 并 形成 整套 网 站 

该 环节 主要 是 根据 后 台 功 能 模块 和 网 页 设计 师 递 交 过 来 的 静态 网 页 进行 整合 ,把 数据 
库 的 数据 信息 在 前 台 页 面相 应 版 位 查询 输出 ,整合 完成 后 ,通过 网 站 的 后 台 就 能 方便 地 管理 
网 站 前 台 的 网 页 数据 信息 了 。 

环节 八 : 网 站 测试 人 员 对 网 站 进行 测试 

整套 网 站 设计 开发 出 来 后 , 须 进入 测试 环节 ,因为 在 开发 过 程 中 ,或 多 或 少 都 会 出 现 一 
些 问 题 , 因 此 测试 人 员 需 要 对 整套 网 站 进行 全 面 的 测试 ,比如 每 个 页 面 的 兼容 性 测试 .功能 
测试 等 , 若 测试 中 发 现 了 问题 ,应 及 时 做 好 记录 并 反馈 给 相应 的 设计 开发 人 员 进 行 整改 ,最 
终 经 测试 没 问 题 后 ,将 进入 发 布 的 环节 。 














环节 九 : 发 布 网 站 
该 环节 的 主要 任务 是 在 互联 网 上 发 布 网 站 ,其 中 包括 购买 虚拟 主机 (俗称 空间 ) ,注册 域 
名 、 网 站 备案 等 工作 ,这 三 方面 的 工作 完成 后 ,网 站 就 可 顺利 上 线 了 。 当 然 ,如 果 你 购买 的 是 
外 的 虚拟 主机 ,可 以 省 去 网 站 备案 环节 。 
环节 十 : 网 站 验收 


与 客户 验收 网 站 是 网 站 建设 的 最 后 一 个 环节 ,客户 确认 没 问题 后 ,要 求 客户 签订 网 站 验 
收报 告 。 验 收报 告 的 签订 意味 着 网 站 建设 工作 顺利 结束 。 
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1. 以 客户 为 中 心 

网 站 能 否 吸引 并 留 住 客户 ,培育 顾客 忠诚 度 、 获 得 较 高 的 客户 转换 率 , 取 得 预期 的 营销 
效益 ,很 大 程度 上 取决 于 网 站 设计 者 是 否 真正 地 站 在 客户 的 角度 想 问题 ,以 及 网 站 的 内 容 和 
架构 是 否 关注 并 满足 了 客户 的 需求 。 这 要 求 企业 在 网 站 建设 规划 的 第 一 个 环节 要 以 客户 为 
中 心 ,注重 客户 体验 ,符合 客户 查询 .阅读 ,搜索 的 习惯 , 尽 可 能 地 给 出 大 家 关注 的 焦点 问题 
的 答案 ,提供 解决 疑难 问题 的 快捷 方式 ,切切 实 实地 贯彻 以 人 为 本 、 苯 重 客户 的 现代 经 营 理 
念 。 只 有 将 企业 网 站 打造 成 企业 用 户 价值 最 大 化 的 重要 窗口 ,才能 确保 企业 的 根本 利益 和 
长 远 利益 。 

2. 与 时 俱 进 

在 互联 网 高 速 发 展 的 今天 ,环境 日 新 月 异 , 人 们 对 审美 的 观点 也 在 发 生变 化 ,因此 在 设 
计 开 发 动态 网 站 的 时 候 , 也 应 跟 上 时 势 , 不 能 用 10 年 前 的 风格 去 设计 版 面 与 开发 功能 ,除非 
建站 的 客户 坚持 那样 做 ,因此 ,网 站 设计 师 在 设计 开发 动态 网 站 时 ,要 跟 上 行业 的 发 展 与 变 
化 ,不 断 更 新 设计 观念 与 开发 理念 ,只 有 这 样 才能 跟 上 时 代 的 步伐 。 

3. 严谨 务实 

对 大 多 数 企 业 而 言 .开拓 网 络 市 场 都 是 一 个 加 新 的 命题 ,任何 创新 与 开拓 无 不 充满 艰辛 
和 挑战 。 互 联网 给 每 个 人 、 每 个 企业 组 织带 来 的 诱惑 太 多 , 带 来 的 竞争 更 激烈 。 企 业 在 开拓 
网 络 市 场 .打造 网 络 营 销 平台 时 ,必须 严 间 务实 , 切 妃 人 云 亦 云 , 要 从 信息 化 优 劣 .技术 力 量 
强 弱 等 因素 出 发 统筹 考虑 ,选择 适合 自己 的 网 络 营销 平台 的 路 径 和 步骤 ,才能 做 到 创新 兼顾 
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稳妥 、 开 拓 而 不 盲目 ,从 而 确保 企业 每 一 笔 网 络 上 的 投入 均 能 带 来 可 观 的 效益 。 

4. 知己 知 彼 

古语 有 云 “ 知 彼 知 己 , 百 战 不 殖 ”, 若 要 打造 一 个 聚集 人 气 、 展 示 特 色 、 高 效 务实 的 动态 网 
站 ,企业 必须 冷静 理智 地 分 析 自 身 以 及 竞争 对 手 的 优势 与 劣势 。 企 业 在 开拓 网 络 市 场 过 程 
中 ,第 一 ,必须 清醒 地 认识 到 自身 的 不 足 和 面临 的 困难 ,同时 还 必须 挖掘 出 企业 的 特长 和 优 
势 , 并 且 很 好 地 把 握 企业 发 展 的 大 方向 和 大 趋势 ;第 二 ,必须 客观 公正 地 评价 竞争 对 手 , 对 于 
对 手 的 优点 和 长 处 , 既 要 吸取 他 们 的 经 验 教 训 , 又 要 善于 学 习 、 巧 于 借鉴 ,更 要 敢于 超越 。 在 
动态 网 站 建站 过 程 中 ,合理 地 扬长 避 短 ,是 提高 网 络 营销 效益 的 重要 手段 。 

5. 把 握 细节 

俗话 说 “细节 决定 成 败 ”, 设 计 动 态 网 站 也 一 样 。 一 个 好 的 网 站 ,势必 要 给 人 以 清新 、 大 
方 、 细 腻 的 感觉 ,从 中 可 折射 出 为 人 处 世 的 态度 和 专业 水 平一 个 不 注重 细节 的 粗糙 网 站 ,只 
能 让 人 看 看 网 站 页 面 墨 了。 因此 ,读者 若 有 意 从 事 网 站 建设 ,请 说 记 要 重视 细节 。 





15 网 站 开发 技术 简介 


早期 的 网 站 建设 技术 主要 是 基于 静态 的 ,网 页 文件 扩展 名 为 “. htm” 或 “. html”, 但 随 着 
站 点 内 容 和 功能 需求 的 不 断 复 杂 化 ,静态 网 站 技术 就 显得 不 太 适 用 ,直到 动态 网 站 建设 技术 
的 出 现 才 解决 了 这 一 问题 。 提 到 动态 网 站 技术 ,就 不 得 不 提 及 CGI 技术 。 这 是 一 种 早期 的 
动态 网 页 技术 ,全 名 为 Common Gateway Interface( 公 用 网 关 接 口 )。 在 当时 这 是 一 种 非常 
大 的 进步 ,CGI 技术 因 可 以 使 用 不 同 的 程序 (如 Visual Basic.Delphi 或 C/C++ 等 ) 编 写 适 合 
的 CGI 程序 ,并 且 功能 强大 ,所 以 早期 曾 被 很 多 网 站 采用 。 但 发 展 到 后 来 ,由 于 编程 困难 、 
效率 低下 修改 复杂 ,所 以 慢 慢 地 被 新 技术 所 取代 。 

目前 广泛 应 用 的 动态 网 站 技术 主要 有 以 下 四 种 。 

1. PHP 

PHP. 即 Hypertext Preprocessor( 超 文本 预 处 理 器 ) ,其 语法 借鉴 了 C、Java、Perl 等 编 
程 语言 ,只 需要 很 少 的 编程 知识 ,就 能 使 用 PHP 建立 一 个 真正 交互 的 Web 站 点 。 因 为 
PHP 为 开源 代码 ,所 以 被 广大 的 编程 者 所 喜爱 , 它 也 是 当前 最 为 流行 的 脚本 语言 之 一 。 

PHP 与 HTML 语言 具有 非常 好 的 兼容 性 ,使 用 者 可 以 直接 在 脚本 代码 中 加 入 HTML 
标签 ,或 者 在 HTML 标签 中 加 入 脚本 代码 就 能 实现 页 面 控 制 。PHP 提供 了 标准 的 数据 库 
接口 ,数据库 连接 方便 ,兼容 性 强 , 扩 展 性 强 , 而 且 还 可 以 进行 面向 对 象 的 编程 。 

2. ASP 

ASP(Active Server Pages) 是 一 种 HTML、Script 与 CGI 的 结合 体 , 它 没有 提供 自己 专 
门 的 编程 语言 ,而 是 允许 用 户 使 用 许多 已 有 的 脚本 语言 编写 ASP 应 用 程序 。 与 HTML 相 
比 ,编写 ASP 程序 更 方便 ,也 更 灵活 。 

ASP 的 优点 是 可 以 包含 HTML 标签 ,也 可 以 直接 存 取 数据 库 及 使 用 无 限 扩充 的 
ActiveX 控件 ,因此 在 程序 编制 上 要 比 HTML 方便 而 且 更 加 灵活 。 通 过 使 用 ASP 的 组 件 
和 对 象 技 术 , 用 户 可 以 直接 使 用 ActiveX 控件 .调用 对 象 的 方法 和 属性 ,以 简单 的 方式 实现 
强大 的 交互 功能 。 但 ASP 技术 基本 上 是 局 限于 微软 的 操作 系统 平台 之 上 ,主要 工作 环境 为 
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微软 的 IIS 应 用 程序 结构 ,又 因 ActiveX 对 象 具 有 平台 特性 ,所 以 ASP 技术 不 能 很 好 地 实 
现在 跨 平台 Web 服务 器 上 工作 ,因此 一 般 只 适合 一 些 中 小 型 站 点 。 

3. ASP. NET 

ASP.NET 的 前 身 为 ASP 技术 ,是 在 IIS 2.0(Windows NT 3. 51) 上 首次 推出 的 ,当时 
与 ADO 1.0 一 起 推出 ,在 JIS 3.0(Windows NT 4.0) 发 扬 光大 ,成 为 服务 器 端 应 用 程序 的 
热门 开发 工具 ,微软 还 特别 为 它 量 身 打 造 了 Visual Inter Dev 开发 工具 ,在 1994 一 2000 年 ， 
ASP 技术 已 经 成 为 微软 推广 Windows NT 4. 0 平台 的 关键 技术 之 一 , 数 以 万 计 的 ASP 网 
站 也 是 这 个 时 候 开 始 如 雨后春笋 般 地 出 现在 网 络 上 。 简 单 以 及 高 度 可 定制 化 的 能 力 , 也 是 
它 能 迅速 崛起 的 原因 之 一 。 不 过 ASP 的 缺点 也 逐渐 地 浮现 出 来 : 面向 过 程 型 的 程序 开发 
方法 ,让 维护 的 难度 增加 了 很 多 ,尤其 是 大 型 的 ASP 应 用 程序 。 解释 型 的 VBScript 或 
JScript 语言 ,让 性 能 无 法 完全 发 挥 。 扩 展 性 由 于 其 基础 架构 的 不 足 而 受 限 ,虽然 有 COM 元 
件 可 用 ,但 开发 一 些 特殊 功能 (如 文件 上 传 ) 时 ,没有 来 自 内 置 的 支持 ,需要 寻求 第 三 方 控件 
商 的 控件 。 

1997 年 时 ,微软 开始 针对 ASP 的 缺点 (尤其 是 面向 过 程 型 的 开发 思想 ) ,开发 了 一 个 新 
的 项 目 。 当 时 ASP. NET 的 主要 领导 人 Scott Guthrie 刚 从 美国 杜 克 大 学 毕业 ,他 和 IIS 团 
队 的 Mark Anders 经 理 一 起 合作 两 个 月 ,开发 出 了 下 一 代 ASP 技术 的 原型 ,这 个 原型 在 
1997 年 的 圣诞 节 时 被 开发 出 来 ,并 授予 一 个 名 称 XSP, 这 个 原型 产品 使 用 的 是 Java 语言 。 
不 过 它 马 上 就 被 纳入 当时 还 在 开发 中 的 CLR 平台 ,Scott Guthrie 事后 也 认为 将 这 个 技术 移 
植 到 当时 的 CLR 平台 上 确实 有 很 大 的 风险 ,但 当时 的 XSP 团队 却 是 以 CLR 开发 应 用 的 第 
一 个 团队 。 

为 了 将 XSP 移植 到 CLR 中 ,XSP 团队 将 XSP 的 内 核 程序 全 部 以 C# 语 言 进行 了 重 
构 , 并 且 改 名 为 ASP 十 。 而 且 为 ASP 开发 人 员 提 供 了 相应 的 迁移 策略 。ASP 十 首次 的 
Beta 版 本 以 及 应 用 在 PDC 2000 中 亮相 ,由 比尔 。 盖 区 主讲 Keynote( 即 关键 技术 的 概览 )， 
由 富士 通 公司 展示 使 用 COBOL 语言 编写 ASP 十 应 用 程序 ,并 且 宣 布 它 可 以 使 用 Visual 
Basic. NET、C# ,Perl,Nemerle 与 Python 语言 (后 两 者 由 ActiveState 公司 开发 的 互通 工具 
支持 ) 来 开发 。 

在 2000 年 第 二 季 时 ,微软 正式 推动 . NET 策略 ,ASP 十 也 顺理成章 地 改名 为 ASP. 
NET, 经 过 四 年 的 开发 ,第 一 个 版 本 的 ASP. NET 在 2002 年 1 月 5 日 亮相 (与 .NET 
Framework1.0 一 起 ) ,Scott Guthrie 也 成 为 ASP. NET 的 产品 经 理 ( 后 来 Scott Guthrie 主 
导 开 发 了 数 个 微软 产品 ,如 ASP. NET AJAX、\Silverlight \SignalR 以 及 ASP. NET MVC)。 

自 . NET 1.0 之 后 ,每 次 .NET Framework 的 新 版 本 发 布 ,都 会 给 ASP. NET 带 来 新 的 

村 性 ,目前 ASP. NET 版 本 最 高 的 是 4.5,ASP. NET 技术 主要 用 于 开发 B/S 结构 的 信息 管 
理 系统 。 

4. JSP 

JSP(Java Server Pages) 是 基于 Java Servlet 以 及 整个 Java 体系 的 Web 开发 技术 。JSP 
是 由 Sun Microsystem 公司 于 1999 年 6 月 推出 的 新 技术 , 它 与 ASP 有 一 定 的 相似 之 处 , 特 
别 在 技术 上 ,但 JSP 能 在 大 部 分 的 服务 器 上 运行 ,而 且 相 对 而 言 其 应 用 程序 相对 易于 维护 
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和 管理 ,安全 性 能 方面 也 被 认为 是 动态 网 站 技术 中 最 好 的 。 

就 以 上 四 种 动态 网 站 建设 技术 而 言 ,各 有 各 的 优势 .编程 人 员 因 为 偏好 和 习惯 的 不 同 ， 
可 以 在 这 四 种 编程 语言 中 进行 选择 。 目 前 被 广泛 认可 的 观点 是 ,ASP 被 认为 是 入 门 比较 简 
单 ,但 是 安全 性 较 低 ,而 且 不 宜 构 架 大 中 型 站 点 。 其 升级 版 . NET 虽然 解决 了 这 一 问题 ,又 
被 诉 病 成 开放 程度 低 ,操作 麻烦 ;JSP 被 认为 是 目前 网 站 建设 技术 中 安全 性 较 好 的 ,但 是 学 
习 和 操作 均 较 为 复杂 ;PHP 几乎 是 介 于 前 两 者 之 间 , 但 其 兼容 性 非常 好 ,并 且 因 为 不 存在 版 
权 方 面 的 问题 ,因而 被 广大 的 编程 爱好 者 所 喜爱 。 





工作 任务 2 需求 分 析 


(人 pe 村 


。 能 够 熟练 运用 功能 结构 图 表达 项 目的 功能 组 织 关系 。 
。 能 够 通过 用 例 图 描述 “用 户 、 需 求 、 系 统 功能 单元 "之 间 的 关系 。 
。 学 会 运用 功能 结构 图 、 用 例 图 做 需求 分 析 。 


(SA 知识 日 标 
。 了 解 功能 结构 图 的 定义 及 作用 。 
。 掌握 功能 结构 图 的 画 法 。 
。 了 解 用 例 图 的 定义 及 作用 。 
。 掌握 用 例 图 的 元 素 及 用 例 之 间 的 关系 。 
。 掌握 用 例 图 的 画 法 。 


一 此 
【二 任务 描述 
本 任务 主要 是 根据 工作 任务 1 的 情境 描述 ,从 功能 结构 和 用 例 模 型 对 网 站 进行 需求 分 
析 , 并 形成 问 道 茶具 有 限 公司 网 站 的 功能 结构 图 与 用 例 模 图 。( 从 软件 工程 的 角度 ,需求 分 
析 阶 段 的 结果 是 用 户 需求 说 明 书 ) 


2.1 从 功能 结构 角度 分 析 


网 站 分 为 两 部 分 : 网 站 前 台 和 网 站 后 台 。 

1. 网 站 的 前 台 

网 站 的 前 台 主 要 包括 以 下 栏目 。 

网 站 的 前 台 首 先 展现 的 是 网 站 的 首页 。 首 页 呈现 的 信息 包括 焦点 幻灯 图 片 ,关于 我 们 、 
新 闻 动态 、 产 品 展示 、 友 情 链接 ,给 我 留言 .联系 我 们 等 。 

关于 我 们 : 显示 公司 的 简介 信息 。 

新 闻 动态 : 显示 公司 的 新 闻 动 态 信息 。 

产品 展示 : 显示 公司 的 产品 信息 。 

友情 链接 : 显示 有 关联 业务 的 公司 或 同行 。 
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给 我 留言 : 访问 者 可 以 留言 。 

联系 我 们 : 显示 公司 的 联系 信息 ,如 电话 .E-mail\ 传 真 等 。 

2. 网 站 的 后 台 

网 站 的 后 台 主 要 包括 以 下 功能 模块 。 

登录 验证 模块 : 这 是 网 站 后 台 的 入 口 。 

基本 配置 模块 : 设置 网 站 的 基本 配置 信息 。 

管理 员 管理 模块 : 用 于 管理 网 站 后 台 的 管理 员 。 

单 页 管理 模块 : 用 于 管理 “关于 我 们 “联系 我 们 ”等 单 页 面 信息 。 
文章 管理 模块 : 用 于 管理 新 闻 动 态 信息 。 

产品 管理 模块 : 用 于 管理 公司 产品 信息 。 

留言 管理 模块 : 用 于 查看 及 处 理 访问 者 留言 信息 。 

焦点 幻灯 管理 模块 : 用 于 管理 网 站 前 台 的 焦点 幻灯 版 位 的 图 片 。 
QQ 客服 管理 模块 : 用 于 管理 公司 的 QQ 客服 信息 。 

友情 链接 管理 模块 : 用 于 管理 网 站 底部 的 友情 链接 信息 。 
退出 系统 模块 : 用 于 退出 网 站 的 后 台 。 

根据 以 上 的 分 析 , 问 道 茶 具有 限 公 司 网 站 功能 结构 图 如 图 2-1 所 示 。 


-| 首页 
关于 我 们 
| 新 闻 动 态 























产品 展示 














[Es 


友情 链接 


| 给 我 留言 








[| 联系 我 们 
[| 登录 验证 模块 

上 | 基本 配置 模块 | 
[| 管理 员 管 理 模 闫 

| 单 页 管理 模块 

| [文章 管理 模块 

上 | 产品 管理 筑 志 
留言 管理 模块 

[| 焦点 幻灯 管理 模块 




















ETEEETFTTT | 


u 
























































门 QQ 客服 管理 模块 








门 | 友情 链接 管理 模块 














退出 后 台 模块 
图 21 
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22 从 用 例 模 型 角度 分 


从 网 站 的 应 用 得 知 ,网 站 的 参与 者 有 网 站 访问 者 和 网 站 后 台 管理 员 两 种 类 型 的 用 户 , 以 
下 将 从 用 户 的 角度 来 分 析 其 与 需求 ,系统 功能 单元 之 间 的 关系 。 

1. 网 站 访问 者 

访问 者 打开 公司 网 站 后 ,可 以 浏览 关于 我 们 、 新 闻 动 态 .产品 信息 、 联 系 我 们 等 栏目 信 
息 ; 可 以 单 击 友情 链接 ;可 以 通过 留言 栏目 书写 留言 信息 ;可 以 通过 QQ 在 线 客服 咨询 公司 
客服 人 员 等 。 

2. 网 站 管理 员 

网 站 管理 员 登 录 网 站 后 台 后 ,可 以 配置 网 站 的 基本 信息 、 管 理 网 站 管理 员 信 息 、 管 理 单 
页 面 信息 ,管理 文章 (新 闻 动态 ) 信 息 .管理 产品 信息 ,查看 及 处 理 留 言 信息 ,管理 焦点 幻灯 信 
息 , 管 理 QQ 客服 信息 ,管理 友情 链接 信息 、 退 出 网 站 后 台 。 

通过 对 网 站 访问 者 和 网 站 管理 员 的 分 析 , 为 了 更 清晰 地 描述 参与 者 与 网 站 需求 .网 站 功 
能 单元 之 间 的 关系 ,形成 公司 网 站 的 用 例 图 如 图 2-2。 





但 改 网 站 配置 信息 
CRM nde ,, 和 
配置 网 站 基本 信息 <indude>”《 低 改 管理 俯 


ee 2 <<indude>> 
管理 人 I 6 
ER LT 
加 <<indude>>C 深 加 单 页 > 
大 一 管理 单 页 信息 CC 
es A <<indude>>~ 
访问 者 网 站 管理 员 删除 单 ? 


> 


indude>> 
i 
CS de 
< ~<sindude>> 删除 文章 
Scindude> 
7 RE ine Na 
~、 ~g<indude>> 
簿 理 QQ 客服 信息 RS 
管理 友情 链接 信息 indude>>  “、 < 委 看 留言 信息 
<<indude>> 1 \\<<indude>> \ i 处 理 留言 信息 
2: <<indude>> <<indudex> \ 人 添加 QQ 客服 
删除 友情 链接 二 人 添加 友情 链接 CE 改 QQ 客服 
修改 友情 链接 删除 QQ 客服 


图 2-2 










浏览 关于 我 们 信息 


列 览 新 闻 动态 信息 
曾 和 恬 杀 我 们 信息 ~、 人 














管理 文章 信息 
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用 例 图 设计 出 来 后 ,通常 还 会 使 用 用 例 规约 来 对 用 例 图 做 进一步 补充 说 明 ,用 例 规约 参 
考 模板 见 表 2-1。 
表 2-1 
用 例 名 称 : 
用 例 标 识 号 : 
参与 者 : 
简要 说 明 : 

















前 置 条 件 : 
基本 事件 流 : 








其 他 事件 流 : 





异常 事件 流 : 





后 置 条 件 : 





注释 : 


根据 编者 多 年 的 经 验 , 设 计 开 发 中 小 型 企业 网 站 管理 系统 ,开发 方 通常 会 省 去 用 例 规 
约 , 因 为 中 小 再 企业 网 站 的 业务 迎 辑 并 不 复杂 ,但 无 论 企 业 网 站 业务 迎 辑 是 否 复杂 ,使 用 用 
例 模 型 有 利于 快速 提炼 客户 的 需求 ,提高 工作 效率 。 


23 撰写 用 户 需求 说 明 书 


从 软件 工程 的 角度 ,用 户 需 求 说 明 书 是 需求 分 析 阶 段 的 结果 ,本 任务 是 否 要 形成 用 户 需 
求 说 明 书 , 各 校 的 教学 单位 可 根据 实际 情况 来 确定 。 因 为 本 书 项 目的 用 户 需求 说 明 书 篇 幅 
较 大 ,所 以 不 在 本 书 上 体现 。 以 下 仅 提 供 目录 作为 参考 。 


模块 1 引言 

1.1 编写 目的 

1.2 业务 背景 

1.3 项 目 目标 

1.4 参考 资料 

1.5 名 词 定 义 
模块 2 整体 概述 
2.1 整体 功能 分 析 
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2.2 整体 流程 分 析 

2.3 整体 用 例 分 析 

模块 3 功能 需求 

3.1 登录 验证 功能 模块 
3.1.1 用 例 图 

3.1.2 用 例 说 明 

3.2 网 站 后 台 框架 功能 模块 
3.2.1 用 例 图 

3.2.2 用 例 说 明 

模块 4 非 功 能 需求 

4.1 用 户 界面 需求 

4.2 软 硬 件 环境 需求 

4.3 其 他 需求 

模块 5 验证 及 确认 (双方 需 签字 确认 ) 


【知识 讲解 】 


1. 功能 结构 图 

(1) 功能 结构 图 的 定义 

功能 结构 图 就 是 按照 功能 的 从 属 关系 画 成 的 图 表 , 图 中 的 每 一 个 框 都 称 为 一 个 功能 模 
块 。 功 能 模块 可 以 根据 具体 情况 进行 分 解 ,分 解 得 最 小 的 功能 模块 可 以 是 一 个 程序 中 的 每 
个 处 理 过 程 ,而 较 大 的 功能 模块 则 可 能 是 完成 某 一 个 任务 的 一 组 程序 。 

功能 结构 图 是 对 硬件 软件、 解决 方案 等 进行 解剖 ,详细 描述 功能 列表 的 结构 、 构 成 、 训 
面 。 从 概念 上 讲 , 上 层 功能 包括 (或 控制 ) 下 层 功能 , 越 上 层 的 功能 越 笼统 , 越 下 层 的 功能 越 
具体 。 功 能 分 解 的 过 程 就 是 一 个 由 抽象 到 具体 、 由 复杂 到 简单 的 过 程 。 

(2) 功能 结构 图 的 设计 

功能 结构 图 的 建立 是 设计 者 的 设计 思维 由 发 散 趋向 于 收敛 、 由 理性 化 变 为 感性 化 的 过 程 。 
它 是 在 设计 空间 内 对 不 完全 确定 设计 问题 或 相当 模糊 设计 要 求 的 一 种 较为 简洁 和 明确 的 表 
示 , 它 以 图 框 形式 简单 地 表示 系统 间 输 入 与 输出 量 的 相互 作用 关系 ,是 概念 设计 的 关键 环节 。 

功能 结构 图 的 设计 过 程 就 是 把 一 个 复杂 的 系统 分 解 为 多 个 功能 较 单一 的 过 程 。 这 种 分 
解 为 多 个 功能 较 单一 的 模块 的 方法 称 作 模块 化 。 模 块 化 是 一 种 重要 的 设计 思想 ,这 种 思想 
把 一 个 复杂 的 系统 分 解 为 一 些 规模 较 小 、 功 能 较 简 单 的 ,更 易于 建立 和 修改 的 部 分 ,一 方面 ， 
各 个 模块 具有 相对 独立 性 ,可 以 分 别 加 以 设计 实现 ; 另 一 方面 ,模块 之 间 的 相互 关系 (如 信息 
交换 ,调用 关系 ), 则 通过 一 定 的 方式 予以 说 明 。 各 模块 在 这 些 关 系 的 约束 下 共同 构成 统一 
的 整体 ,完成 系统 的 各 项 功能 。 

(3) 功能 结构 图 的 作用 

功能 结构 图 主要 是 为 了 更 加 明确 地 体现 内 部 组 织 关 系 , 更 加 清晰 地 厘清 内 部 逻辑 关系 ， 
进一步 规范 各 部 分 功能 ,使 之 条 理化 。 

(4) 功能 结构 图 的 应 用 范围 

功能 结构 图 多 应 用 于 程序 开发 .工程 项 目 施工 、 组 织 结 构 分 析 、 网 站 设计 等 模块 化 场景 。 
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2. 用 例 图 

用 例 图 主要 用 来 描述 “用 户 需求、 系统 功能 单元 ”之 间 的 关系 。 它 展示 了 一 个 外 部 用 户 
能 够 观察 到 的 系统 功能 模型 图 。 它 的 主要 作用 是 帮助 开发 团队 以 一 种 可 视 化 的 方式 理解 系 
统 的 功能 需求 。 

用 例 图 包括 参与 者 (Actor) 用例 (Use Case) 、 子 系统 (Subsystem)、 关 系 (Relation) ,项 
目 (Artifact) \ 注 释 (Comment) 等 元 素 。 下 面 介 绍 部 分 元 素 。 

(1) 参与 者 。 表 示 与 应 用 程序 或 系统 进行 交互 的 用 户 .组 织 或 外 部 系统 ,用 一 个 小 人 表 
示 , 如 图 2-3 所 示 。 

(2) 用 例 。 它 是 对 包括 变量 在 内 的 一 组 动作 序列 的 描述 ,系统 执行 这 些 动 作 , 并 产生 传 
递 特定 参与 者 的 价值 的 可 观察 结果 。 这 是 UML 对 用 例 的 正式 定义 ,对 于 初学 者 来 说 可 能 
有 点 难 懂 。 可 以 这 样 去 理解 ,用 例 是 参与 者 想 要 系统 做 的 事情 。 对 于 用 例 的 命名 ,可 以 给 用 
例 取 一 个 简单 描述 性 的 名 称 , 一 般 为 带 有 动作 性 的 词 。 用 例 在 画图 中 用 椭圆 来 表示 ,椭圆 
里 面 附 上 用 例 的 名 称 ,如 图 2-4 所 示 。 

(3) 子 系 统 。 用 来 展示 系统 的 一 部 分 功能 ,这 部 分 功能 联系 紧密 。 比 如 ,学 籍 管 理 系 统 
的 学 生 信息 管理 子 系统 ,如 图 2-5 所 示 。 













学 生 信息 管理 子 系统 


添加 学 生 信息 








里 修改 学 生 信息 


学 籍 管理 员 








删除 学 生 信息 














查询 学 生 信息 








参与 者 用 例 名 村 > 


2-3 2-4 2-5 


(4) 关系 。 用 例 图 中 涉及 的 关系 有 关联 、 泛 化 ,包含 .扩展 .具体 见 表 2-2。 
表 2-2 














RR | mm | i 
关联 参与 者 与 用 例 之 间 的 关系 cs 
泛 化 参与 者 之 间或 用 例 之 间 的 关系 -= 中 > 
包含 用 例 之 间 的 关系 <<indude>> 
扩展 用 例 之 间 的 关系 














@ 关联 (Association) 。 表 示 参 与 者 与 用 例 之 间 的 通信 ,任何 一 方 都 可 发 送 或 接收 消 
息 ,箭头 指向 消息 接收 方 。 箭 头 指向 父 用 例 . 如 图 2-6 所 示 。 

@ 泛 化 (Inheritance) 。 就 是 通常 理解 的 继承 关系 。 子 用 例 和 父 用 例 相 似 , 但 表现 出 更 
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特别 的 行为 。 子 用 例 将 继承 父 用 例 的 所 有 结构 、 行 为 和 关系 。 子 用 例 可 以 使 用 父 用 例 的 一 
段 行 为 ,也 可 以 重 载 它 。 父 用 例 通常 是 抽象 的 。 箭 头 指向 父 用 例 , 如 图 2-7 所 示 。 


大 


超级 管理 员 对 
天 pe 管理 员 


普通 管理 员 


六 查询 课程 成 绩 
学 生 


图 2-6 2-7 


@@ 包含 (Include)。 包 含 关系 用 来 把 一 个 较 复杂 用 例 所 表示 的 功能 分 解 成 较 小 的 步 又 。 

箭头 指向 分 解 出 来 的 功能 用 例 , 如 图 2-8 所 示 。 

团 扩展 (Extend)。 扩 展 关系 是 指 用 例 功 能 的 延伸 ,相当 于 为 基础 用 例 提 供 一 个 附加 
功能 。 

箭头 指向 基础 用 例 , 如 图 2-9 所 示 。 


CR ET 


A NR 


3- 一 <<include>> / AN 
维护 产品 信息 》 一 一 -> 修改 产品 信息 <<extend>> / \ extend>> 
TS 2 ~、 
io ve ， \ 
图 9 


2-8 





2- 


辆 提示 : 包含 .扩展 、 泛 化 的 区 别 如 下 。 

条 件 性 : 泛 化 中 的 子 用 例 和 “包含 ”中 的 被 包含 的 用 例会 无 条 件 发 生 , 而 “扩展 ”中 的 延 
伸 用 例 的 发 生 是 有 条 件 的 。 

直接 性 : 泛 化 中 的 子 用 例 和 “扩展 ”中 的 延伸 用 例 为 参与 者 提供 直接 服务 ,而 “包含 ”中 
被 包含 的 用 例 为 参与 者 提供 间接 服务 。 

对 于 “扩展 ”而 言 , 延 伸 用 例 并 不 包含 基础 用 例 的 内 容 ,基础 用 例 也 不 包含 延伸 用 例 的 
内 容 。 

对 于 “ 泛 化 ”而 言 , 子 用 例 包 含 基础 用 例 的 所 有 内 容 , 以 及 它 和 其 他 用 例 或 参与 者 之 间 的 
关系 。 

3. 用 例 规 约 

应 该 避免 这 样 一 种 误解 : 认为 由 参与 者 和 用 例 构成 的 用 例 图 就 是 用 例 模 型 ,用 例 图 只 
是 在 总 体 上 大 致 描述 了 系统 所 能 提供 的 各 种 服务 ,对 系统 的 功能 有 一 个 总 体 的 认识 。 除 此 
之 外 ,还 需要 描述 每 一 个 用 例 的 详细 信息 ,这 些 信 息 包含 在 用 例 规约 中 ,用 例 模 型 是 由 用 例 
图 和 每 一 个 用 例 的 详细 描述 一 一 用 例 规约 所 组 成 的 。RUP(Rational Unified Process ,统一 
开发 过 程 ) 中 提供 了 用 例 规约 的 模板 ,每 一 个 用 例 的 用 例 规约 都 应 该 包含 以 下 内 容 。 

(1) 简要 说 明 (Brief Description) 。 简 要 介绍 该 用 例 的 作用 和 目的 。 
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(2) 事件 流 (Flow of Event) 。 包 括 基本 流 和 备 选 流 , 事 件 流 应 该 表示 出 所 有 的 场景 。 

(3) 用 例 场景 (Use-Case Scenario)。 包 括 成 功 场景 和 失败 场景 ,场景 主要 是 由 基本 流 
和 备 选 流 组 合 而 成 的 。 

(4) 特殊 需求 (Special Requirement)。 描 述 与 该 用 例 相 关 的 非 功能 性 需求 (包括 性 能 、 
可 靠 性 、 可 用 性 和 可 扩展 性 等 ) 和 设计 约束 (所 使 用 的 操作 系统 、 开 发 工具 等 )。 

(5) 前 置 条 件 (Pre-Condition)。 执 行 用 例 之 前 系统 所 处 的 状态 。 

(6) 后 置 条 件 (Post-Condition)。 用 例 执 行 完 毕 后 系统 可 能 处 于 的 一 组 状态 。 

用 例 规约 基本 上 是 用 文本 方式 来 表述 的 ,为 了 更 加 清晰 地 描述 事件 流 , 也 可 以 选择 使 用 
状态 图 活动 图 或 序列 图 来 辅助 说 明 。 只 要 使 表达 简洁 明了 ,就 可 以 在 用 例 中 任意 粘贴 用 户 
界面 和 流程 的 图 形 化 显示 方式 ,或 是 其 他 图 形 。 

以 下 为 某 网 站 管理 员 发 布 新 闻 文 章 的 用 例 及 描述 > 
用 例 的 规约 。 网 站 管理 员 

网 站 管理 员 发 布 新 闻 文 章 的 用 例如 图 2-10 所 示 。 

描述 用 例 的 规约 见 表 2-3。 

表 2-3 

用 例 名 称 : 发 布 新 闻 文 章 
用 例 标识 号 : 2-11 
参与 者 : 网 站 管理 员 


简要 说 明 : 网 站 管理 人 进入 新 闻 文章 发 布 页 面 , 编 辑 好 信息 后 将 其 发 布 ,新 闻 标 题 将 显示 在 网 站 前 台新 
闻 动 态 列表 上 
前 置 条件 : 网 站 管理 员 登 录 网 站 后 台 


基本 事件 流 : 

(1) 网 站 管理 员 单 击 后 台 左 侧 的 “发 布 文 章 ” 子 菜单 

(2) 网 站 后 台 右 侧 出 现 新 闻 信 息 编辑 框 

(3) 文章 信息 编辑 完成 后 , 单 击 “ 发 布 " 按 钮 ,完成 文章 的 发 布 
(4) 用 例 终止 


其 他 事件 流 : 在 单 击 “ 发 布 ”按钮 之 前 ,网 站 管理 员 可 以 单 击 “ 返 回 "按钮 ,将 返回 到 原来 的 页 面 状 态 


异常 事件 流 : 
(1) 提示 错误 信息 ,由 网 站 管理 员 确 认 
(2) 返回 到 网 站 后 台 的 主 界面 


后 置 条 件 : 文章 信息 在 网 站 上 成 功 发 布 
注释 : 无 


图 2-10 
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\S2 能 力 目 标 


。 能 够 根据 需求 形成 网 站 版 面 的 结构 草图 。 
。 能 够 根据 网 站 版 面 的 结构 草图 ,搜集 、 处 理 、 加 工 素材 设计 出 网 站 的 整套 版 面 。 
。 掌握 网 站 版 面 的 设计 过 程 ,并 培养 学 生 细 心 严 谨 的 工作 态度 。 


【A 知识 目标 

。 掌握 网 站 版 面 结构 草图 的 画 法 。 

。 熟悉 企业 网 站 常见 的 版 位 ,并 掌握 版 位 的 命名 方法 。 

。 熟悉 网 站 版 面 设计 的 过 程 及 设计 的 方法 。 

。 掌握 使 用 相关 软件 (Fireworks 或 Photoshop) 设 计 整 套 网 站 版 面 的 方法 。 
[过 
\ 4 任务 描述 

本 次 工作 任务 主要 是 根据 需求 分 析 的 结果 ,自行 寻找 合适 的 素材 ,使 用 图 形 图 像 处 理 软 
件 设 计 网 站 的 整套 版 面 ,包括 首页 版 面 “ 关 于 我 们 ”版 面 .新闻 动 态 列表 页 版 面 、 新 闻 动 态 内 
容 页 版 面 、 产 品 展示 列表 页 版 面 、 产 品 展示 内 容 页 版 面 “ 给 我 留言 版面“ 联系 我 们 ”版 面 。 

大 家 通过 完成 工作 任务 2, 对 网 站 整体 结构 已 非常 清晰 ,在 与 客户 当面 沟通 确认 后 ,网 
页 设计 师 ( 美 工 ) 接 下 来 要 做 的 就 是 搜集 相关 素材 设计 网 站 版 面 (即使 用 相关 软件 设计 网 站 
的 平面 ,此 阶段 只 是 一 整套 图 片 ) ,版 面 设计 完成 后 ,网 页 设计 师 (美工 ) 应 积极 与 客户 沟通 。 
车 客户 对 版 面 效 果 不 满意 ,网 页 设计 师 ( 美 工 ) 应 继续 设计 或 修改 ,直至 客户 满意 或 认可 。 

问 道 茶 具有 限 公司 网 站 的 版 面 共有 8 个, 分别 为 首页 版 面 、 关 于 我 们 版 面 、 新 闻 动 态 列 
表 页 版 面 、 新 闻 动 态 内 容 页 版 面 、 产 品 展示 列表 页 版 面 、 产 品 展示 内 容 页 版 面 、 给 我 留言 版 
面 、 联 系 我 们 版 面 ,以 下 将 为 读者 讲解 设计 过 程 ,而 具体 使 用 软件 设计 版 面 的 细节 不 做 演示 。 


3.1 设计 首页 版 面 


网 站 首页 是 展示 给 访问 者 的 第 一 个 页 面 ,是 给 访问 者 第 一 印象 的 页 面 ,因此 ,首页 版 面 
的 设计 至 关 重 要 。 在 设计 时 ,首先 要 明确 首页 的 结构 ,通常 会 用 线条 勾画 出 页 面 的 结构 ,这 
种 结构 图 称 之 为 版 面 结构 草图 。 
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1. 设计 “首页 ”版 面 结构 草图 

结合 用 户 需 求 ,开始 规 划 网 站 首页 版 面 结构 草图 ,可 以 在 纸 上 夯 出 来 ,也 可 以 使 用 相关 
工具 进行 设计 。 在 规划 草图 的 时 候 ,首先 要 确定 网 站 的 主体 宽度 ,那么 如 何 确定 网 站 页 面 的 
宽度 呢 ? 随 着 人 们 对 清晰 度 的 要 求 越 来 越 高 ,显示 器 的 分 辩 率 也 越 来 越 高 ,但 还 是 存在 一 部 
分 较 老 的 显示 器 ,其 默认 分 辩 率 是 1024 像素 X768 像素 ,因此 为 了 兼容 这 种 分 辩 率 的 浏览 
器 ,设计 页 面 时 ,页 面 主体 内 容 的 宽度 以 不 超过 1024 像素 为 佳 ,因此 ,初步 形成 了 首页 版 面 



































结构 草图 ,如 图 3-1 所 示 。 
页 头 
焦点 幻灯 
新 闻 动态 关于 我 们 最 新 产品 
页 脚 
3-1 


草图 设计 出 来 后 ,结合 当前 流行 的 风格 ,做 出 如 下 的 设 定 。 

导航 部 分 : 版 位 宽度 适应 屏幕 宽度 .主体 内 容 宽度 为 1000px( 所 达到 的 效果 是 ,在 1024 像 
素 X768 像素 分 辨 率 的 浏览 器 下 ,导航 的 内 容 能 在 不 出 现 水 平 滚动 条 时 完全 显示 ,在 分 辨 率 
大 于 1024 像素 X768 像素 的 浏览 器 上 ,导航 背景 能 自 适应 屏幕 宽度 )。 

焦点 幻灯 部 分 : 该 版 位 的 背景 应 做 到 自 适应 ,但 幻灯 图 片 (宽度 为 1000px) 在 该 版 位 居 
中 显示 。 有 些 读者 可 能 会 有 疑问 ,为 什么 图 片 的 宽度 不 能 自 适应 呢 ? 当然 可 以 ,也 有 多 种 实 
现 的 方法 ,其 中 一 种 方法 是 通过 JavaScript 实现 ,但 可 能 出 现 的 情况 是 当 图 片 的 实际 宽度 小 
于 屏幕 宽度 时 ,图 片 会 被 拉 伸 ,导致 图 片 失真 及 不 清晰 。 

“新 闻 动 态 ”“ 关 于 我 们 “最 新 产品 ”所 形成 的 横向 版 位 : 版 位 居中 显示 ,主体 内 容 的 宽 
度 设置 为 1000px, 以 兼容 分 辩 率 为 1024 像素 X768 像素 的 显示 器 。 

页 脚 : 背景 适应 屏幕 宽度 ,但 主体 内 容 宽度 为 1000px。 

基于 以 上 分 析 , 进 一 步 明确 版 面 的 结构 。 以 1600 像素 X900 像素 分 辩 率 显示 器 为 例 ， 
页 面 的 结构 如 图 3-2 所 示 。 

2. 设计 首页 版 面 

经 与 客户 (小 李 ) 沟 通 得 知 ,他 希望 版 面 简约 清晰、 大 气 , 因 此 结合 网 站 的 主题 寻找 素材 ， 
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焦点 J 灯 





新 闻 动 态 ] 最 新 产品 


1000 px 
向 左 伸展 页 肝 二 向 石 仲 层 








图 3-2 


按照 结构 草图 自 上 而 下 设计 首页 版 面 , 至 于 使 用 什么 软件 来 设计 , 依 个 人 习惯 而 定 。 常 用 的 软 
件 有 Photoshop、Fireworks。 本 书 将 以 Fireworks 来 进行 设计 ,画布 的 宽度 设置 为 1000px。 

(1) 设计 “页 头 ?版 位 

@“ 页 头 " 版 位 由 公司 名 称 ( 或 Logo) 和 导航 组 成 ,版 位 的 高 度 设置 为 120px, 背 景 颜色 
设置 为 #8C2300。 

@ 公司 名 称 “ 问 道 茶 具 ” 的 字体 设置 为 迷你 简 黄 草 ( 注 意 : 系统 中 没有 自 带 该 字体 , 需 
读者 在 网 上 下 载 安装 ) ,字体 大 小 为 46 号 。 

@ 导航 的 内 容 有 “网 站 首页 “关于 我 们 "新闻 动态 “产品 展示 ”给 我 留言 “联系 我 
们 ”, 字 体 设置 为 微软 雅 黑 ,字体 大 小 为 17 号 。 若 要 做 到 当 鼠 标 指针 放 到 某 个 导航 栏目 上 时 
变换 背景 ,在 设计 时 就 应 有 所 体现 。 

“页 头 ? 版 位 设计 效果 如 图 3-3 所 示 。 





(2) 设计 “焦点 幻灯 ”版 位 

设计 该 版 位 的 关键 是 找到 合适 的 图 片 素材 ,然后 对 素材 进行 加 工 处 理 ,当然 , 若 能 找到 
合适 的 图 片 更 好 ,可 以 直接 简单 加 工 后 使 用 ,该 版 位 的 高 度 设置 为 380px, 背 景 颜色 设置 为 
# 井 F6E4BC ,另外 ,为 了 使 焦点 幻灯 图 更 有 意蕴 :可 以 加 入 诗词 ,标题 为 “让 足 停留 ,让 心安 
定 ”, 内 容 为 "于 闹市 中 保有 宁静 .于 闲 揭 中 品味 生活 ,一 份 面 对 哈 器 的 淡定 ,一 份 返 王 归 真 的 
从 容 ”。 该 版 位 的 设计 效果 如 图 3-4 所 示 。 

(3) 设计 “新 闻 动 态 “ 关 于 我 们 “最 新 产品 ”所 形成 的 横向 版 位 

该 版 位 的 主体 宽度 为 1000px。“ 公 司 新 闻 ” 栏 目 宽度 为 300px,“ 关 于 我 们 ”栏目 为 
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二 二 于 于 王 
份 份 亲 阅 。 是 
反面 过 市 ” 售 
球 对 中 中 留 
归 昌 品 保 

页 里 于 有 e。 让 
的 的 生字 沪 
从 读 活 静安 
安定 起 用 二 


图 3-4 





380px,“ 最 新 产品 ”栏目 为 300px, 高 度 可 根据 实际 情况 设 定 。 


@ 设计 “新 闻 动 态 ” 版 位 。 该 版 位 由 上 、 中 、 下 
三 部 分 组 成 ,上 部 左 侧 为 栏目 标题 “新 闻 动 态 ”, 右 
侧 为 * 更 多 ”( 通 常 也 会 使 用 more) ;中 部 为 首页 推 
荐 置顶 新 闻 , 由 左 侧 装饰 图 片 和 文章 的 简介 组 成 ， 
简介 的 内 容 可 以 重复 使 用 文本 “文章 简介 ”填充 至 
合适 为 止 (通常 所 用 的 文本 可 用 ”XXXX” 填 充 , 但 
用 真正 的 文字 填充 效果 更 好 ,建议 使 用 文字 填充 ); 
下 部 为 最 新 首页 推荐 新 闻 标题 ,并 在 标题 的 下 面 添 
加 虚线 ,该 版 位 设计 的 效果 如 图 3-5 所 示 。 

@ 设计 “关于 我 们 ”版 位 。 该 版 位 结构 和 “新 闻 动 
态 ” 相 似 ,都 是 由 上 中、 下 三 部 分 组 成 ,上 部 主要 是 栏 
目的 标题 ,中 部 为 一 张 公司 形象 图 片 ,下 部 为 “关于 我 
们 ?的 文字 片段 ,该 版 位 设计 的 效果 如 图 3-6 所 示 。 





新 闻 动 态 更 多 








新 闻 动 态 标题 

高 性 价 比 的 新 茶 上 市 ， 茶 业 门户 网 
站 及 微 信 公 众 平台 也 频频 举行 各 
类 团购 茶 样 派发 活动 ， 爱 茶 人 士 
只 需 稍 加 留心 …*…*… [详细 ] 





养生 茶 ， 喝 出 男性 健康 

茶 事 起 源 :“ 六 朝 以 前 的 茶 事 ” 

红 碎 茶 红 艳 的 颜色 、 鲜 爽 的 香气 和 很 高 的 营养 价值 
中 国 古 代 史 料 中 的 茶 字 和 人 世界 各 国 对 茶 字 的 音译 
茶 是 用 来 喝 的 一 杯 陈 年 普洱 味道 





图 3-5 


@ 设计 “最 新 产品 ”版 位 。 该 版 位 由 上 、 下 两 部 分 组 成 ,上 部 为 该 栏目 标题 “最 新 产 
品 ”, 下 部 为 产品 的 缩 略 图 ,将 通过 轮 播 的 方式 展示 最 新 的 产品 图 片 ,该 版 位 设计 出 来 的 效果 


如 图 3-7 所 示 。 





关于 我 们 


问 道 茶具 有 限 公司 是 一 家 以 经 营 茶具 、 茶 周边 、 茶 叶 产 品 为 主 的 | 


新 型 茶 行 业 电 子 商务 公司 。 公 司 正式 成 立 于 2010 年 1 月 4 日 ， 在 茶 行 
业 我 们 一 直 秉 持 荐 做 茶 就 是 做 人 的 原则 ， 一 直 非 常 自豪 地 走 在 茶 行 
业 的 前 端 ， 公 司 现 有 运营 部 、 广 告 部 、 销 舍 部 、 物 流 部 四 个 常规 部 











最 新 产品 更 多 











图 3-6 
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(4) 设计 “页 尾 ” 版 位 

网 页 的 “页 尾 ” 版 位 通常 显示 公司 名 称 、 地 址 、 联 系 电话 、 电 子 邮 箱 、 技 术 支 持 等 信息 , 目 
前 二 维 码 应 用 非常 广泛 ,所 以 通常 也 会 把 网 站 的 地 址 或 微 信 公众 号 等 的 二 维 码 放 入 其 中 。 
该 版 位 设计 出 来 的 效果 如 图 3-8 所 示 。 


同道 茶具 


0000 E-aail:OUGBXOOOOOO 
地 址 。 XXXXX 省 XXXKXKXX 市 XXXXXXXXXXXXX 
技术 支持 ;XXIXIXIXAXXXXX 科 技 有 限 公司 





友 俏 久 凌 : 中 国 茶叶 网 。 茶 文艺 网 


图 3-8 


至 此 ,网 站 首页 版 面 设计 完毕 ,效果 如 图 3-9 所 示 。 








凋 关 号 :下 闫 依 字 上 
简 淳 号 问 周生生 村 | 


养生 茶 ， 喝 出 男 从 健康 
项 事 起 广 ，“ 六 明 以 前 的 共事 ” 
生 隐 基 红 槐 颜色 、 刘 机 村 香气 和 要 的 音准 价值 二 
中 国 古 代 下 料 中 的 共 字 和 民办 各 国 提亲 的 音 和 
送 是 用 来 曲 的 一 相 陈 全 但 于 间 






kr 天 和 己 访 二 二 


的 关中 经 营 企 业 和 全 球 最 人 的 
年 。 法司 戏 力 于 为 全 球 守 户 
结合 、 地 元 发 












32 设计 “关于 我 们 " 版 面 


“关于 我 们 ”页 面 的 主要 目的 是 向 访问 者 展示 公司 的 简介 信息 ,让 访问 者 了 解 公司 的 情 


E 设 行业 的 设计 习惯 ,该 页 面 的 “页 头 ” 版 位 、“ 





况 , 按 照 网 站 于 


幻灯 ”版 位 “页 尾 ” 版 位 与 首 





页 相应 的 版 位 是 一 致 的 ,而 页 面 主体 部 分 通常 又 按 “ 左 一 右 ” 方 式 分 栏 ,分 为 左 侧 " 侧 边 栏 


21 


| 要 日 驱 动 式 PHP 动态 网 站 开发 实 训 教程 





sidebar” 版 位 和 右 侧 “ 关 于 我 们 ”内 容 版 位 。 

1. 设计 “关于 我 们 "版面 结构 草图 

经 过 分 析 , 该 版 面 的 结构 草图 如 图 3-10 所 示 。 

2. 设计 “关于 我 们 ”版 面 

在 版 位 内 容 的 设计 上 .*“ 侧 边栏 sidebar” 版 位 又 通常 用 于 放置 QQ 工作 时 间 、 联 系 电 
话 、 电 子 邮 箱 、 微 信和 号、 最 新 动态 、 热 点 文章 、 文 章 类 别 、 产 品类 别 等 信息 ,具体 要 展示 什么 
信息 ,可 以 根据 实际 情况 进行 选取 ,编者 将 在 该 版 位 放置 QQ 在 线 客服 、 工 作 时 间 、 联 系 
电话 .电子 邮箱 、. 微 信 号 信息 ; 右 侧 * 关 于 我 们 ?内 容 版 位 主要 输出 关于 我 们 的 内 容 ( 即 公 
司 简介 信息 ) 。 


(1) 设计 * 侧 边栏 sidebar” 版 位 
该 版 位 的 栏目 标题 为 "在线 客 服 ”, 宽 度 设 置 为 220px, 设 计 出 来 的 效果 如 图 3-11 所 示 。 


1000 px 
页 头 


焦点 幻灯 








Y 服 |， 人 GE 


客服 1; 0 交 让 | 


24 小 时 服务 热线 


侧 边 栏 sidebar 关于 我 们 内 容 
0000-0000000 


gw 微 信 公 众 号 


dreammy168 


电子 邮箱 
[| -| tt 


图 3-10 图 3-11 




















(2) 设计 右 侧 "关于 我 们 内 容 ” 版 位 
该 版 位 主要 是 输出 公司 简介 的 内 容 , 在 具体 的 结构 上 由 页 内 导航 (标题 “关于 我 们 ”包含 


于 其 中 ) 和 “简介 内 容 ” 两 部 分 组 成 ,如 果 已 有 客户 的 “关于 我 们 ”资料 , 则 用 客户 的 “关于 我 
们 ”资料 填充 ;车 没有 ,可 以 在 网 上 找 一 段 相 关 文 字 填 充 , 也 可 以 用 多 个 文本 “关于 我 们 内 容 ” 
填充 ,设计 出 来 的 效果 如 图 3-12 所 示 。 

至 此 ,“ 关 于 我 们 ”页 面 的 版 面 设计 完 毕 , 效 果 如 图 3-13 所 示 。 
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首页 -> 关于 我 们 





关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 
们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 
我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 
于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 
关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 
容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 
内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 

们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 
关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 
容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 
内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 
们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 
我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 
于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 
关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 


图 3-12 


于 我 们 新 闻 动 态 展示 名 联系 我 们 





转 关 他 和 百 淤 许字 1 
乱 治 至 包 所 等 臣 罕 | 
peddle 

这 闪 冲 家 五 填 了 路 
隐 兴 站 宁国 认 珠 记 





关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 








才 服 ! 全 5 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 F 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 
# 且 (GE 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 


于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 

关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 容 关于 我 们 内 

24 小 时 服务 热线 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 

000-00 内 容 关于 我 们 内 罕 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 

们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 

关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 穿 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 

Rp 从 和 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 

dreammy168 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 

们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 

我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 

© 电邮 条 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 和 内容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 
Hreammymavy8163. com 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 。 







关于 我 们 内 容 

















图 3-13 
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33 设计 ' 宁 闻 动态 " 版 面 


“新 闻 动 态 ” 版 面 是 向 访问 者 展示 企业 新 闻 动 态 信 息 的 窗口 ,主要 由 新 闻 动态 列表 页 和 
新 闻 动态 内 容 页 组 成 。 

1. 设计 “新 闻 动 态 ” 列 表 页 版 面 

该 页 面 与 “关于 我 们 ”页 面 的 结构 相似 ,由 “页 头 ” 版 位 “焦点 幻灯 ”版 位 “ 侧 边 栏 
sidebar” 版 位 “文章 标题 列表 ”版 位 “页 尾 ” 版 位 组 成 。 

(1) 设计 “新 闻 动 态 ” 列 表 页 版 面 结构 草 图 

该 页 的 版 面 结构 草图 如 图 3-14 所 示 。 


F 1000 px 
页 头 











侧 边 栏 sidebar 文章 标题 列表 

















页 肢 








图 3-14 
(2) 设计 “新 闻 动态 ”列表 页 版 面 
该 版 面 只 需 设 计 “ 文 章 标题 列表 ”版 位 即 可 ,其 他 版 位 与 “关于 我 们 ”页 面 的 相同 。“ 文 章 
标题 列表 ”版 位 的 设计 效果 如 图 3-15 所 示 。 
至 此 ,“ 新 闻 动态 ”列表 页 的 版 面 已 设计 完毕 ,效果 如 图 3-16 所 示 。 
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首页 -> 新 闻 动 态 
茶叶 具有 养 和 的 功效 吗 ? 2016-4-2 
茶 事 起 源 :“ 六 朝 以 前 的 茶 事 ” 2016-4-2 
红 碎 茶 红 艳 的 颜色 、 鲜 爽 的 香气 和 很 高 的 营养 价值 2016-4-2 
中 国 古代 史料 中 的 茶 字 和 世界 各 国 对 茶 字 的 音 评 2016-4-2 
茶 是 用 来 喝 的 。 一 杯 陈 年 普洱 味道 2016-4-2 
入 山 无 处 不 飞 翌 ， 碍 螺 春香 百 里 醉 2016-4-2 
普洱 茶 越 陈 越 香 的 年 限 是 多 久 ? 2016-4-2 
[3 


















































图 3-15 


关于 我 们 


给 我 留言 联系 我 们 





帝 才 说 闹 吾 圳 画 中 
测 癌 已 贿 型 宁 用 记 


鸭 泊 至 把 百 斋 诛 字 1 
沿 沙 全 绢 岂 车 如 字 
者 六 记 尖 名 二 所 弄 中 


首页 -> 新 闻 动态 


茶叶 具有 养 半 的 功效 吗 ? 


共事 起 源 :“ 六 归 以 前 的 获 事 ~ 





红 绊 茶 红 籽 的 最 色 、 鲜 更 的 理气 和 根 商 的 党 养 价值 


24 小 时 服务 热线 
0000-0000000 中 国 古代 史料 中 的 其 字 和 世界 各 国 对 茶 字 的 青 评 


茶 是 用 来 唱 的 ”一 杯 际 年 





涯 味道 
信 公 众 号 
和 微 信 公众 pe 
dreamnyl68 入 山 无 处 不 飞 型 ， 牧 螺 存 香 百 里 醒 


电子 部 并 普 泪 荣 越 陈 直下 的 年 限 是 多 久 ? 
© 


dreammymavy@163. com 





0 E-mail -XIXOXE XOOOONK 
KU 省 SOUOXIX 市 ROOOODIXIOGX 


笑 ， XXXXKXXXXIXIXX 科 技 有限 公司 
链 素 - 中 国 茶叶 间 茶 文艺 网 





2016-42 
2016-4-2 
2016-4-2 
2016-4-2 
2016-4-2 
2016-4-2 


2016-4-2 


国 台 中 四 田町 








图 3-16 
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2. 设计 “新 闻 动 态 ” 内 容 页 版 面 

该 页 面 与 “关于 我 们 ”页 面 的 结构 相同 ,由 “页 头 ” 版 位 “焦点 幻灯 ”版 位 “ 侧 边 栏 
sidebar” 版 位 “ 右 侧 文章 内 容 ” 版 位 “页 尾 ” 版 位 组 成 ,不 同 的 是 右 侧 内 容 版 位 是 输出 文章 
的 具体 内 容 。 

(1) 设计 “新 闻 动 态 ” 内 容 页 版 面 结 构 草 图 

该 页 版 面 的 结构 草图 如 图 3-17 所 示 。 








F 1000 px 








焦点 幻灯 





侧 边 栏 sidebar 章 内 容 























(2) 设计 “新 闻 动态 ”内 容 页 版 面 

“文章 内 容 ” 版 位 主要 由 “页 内 导航 "和 “文章 内 容 ” 组 成 ,文章 的 内 容 可 以 找 一 篇 相关 的 
内 容 填充 ,字体 的 大 小 行距 等 应 细心 调整 至 合适 即 可 ,该 版 面 设 计 出 来 的 效果 如 图 3-18 
所 示 。 


26 





工作 任务 3 版 面 设计 | 





掀 污 号 冶 百 潜 陈 审 | 
向 汉 芒 加 岂 当 于 全 | 
全 环 富 沪 和 三 术 小 

之 只 训 桨 五 吉本 中 
站 曲 疡 请 加 市 化 





首页 -> 新 闻 中 心 





养生 茶 ， 喝 出 男性 健康 


来 源 ， 本 站 ”发 日 期 ，2016-4-2 


县 GE 
Y% 且 ， Er 





游戏 狂人 等 都 是 形 穿 男人 们 一 种 成 总 的 生活 习惯 对 身体 都 是 有 很 大 的 
\ 病 为 这 些 些 节 过 饮 茶 来 窒 解 对 男人 身体 造成 的 伤 


如 今 许多 关于 男性 的 名 说 莫 出 ， 酒 
24 小 时 服务 热线 伤 者 的 ， 男 人 健康 问题 就 成 了 人 们 关注 的 全 点 








课 田 试 试 葛 花 











ay 每 天 少 克 的 饮 消 对 身体 有 好 处 ， 但 每 次 部 哆 商 就 会 对 身体 产生 很 大 的 危害 ， 特 别 是 对 消化 道 、 肝 肚 的 损伤 万 为 严重 ， 
Gp 人 从 长 期 如 比 ， 会 大 大 增加 促 上 夺 硬 化 和 脂肪 肝 的 可 能 性 
Wr 专家 推荐 ， 保 护 肝 胜 的 最 好 办 法 就 是 成 酒 。 如 果 嘲 腑 了 ， 推 荐 舍 颂 花 汇 菜 嘲 ， 癸 花 就 是 区 根 的 伦 ， 它 具有 要 消 的 功 





修 ， 全 来 泡 茶 可 以 解 酒 

健康 撮 陪 ， 如 果 出 消 时 和 返 当 吃 些 水 果 ， 就 能 稍微 减 经 消 情 对 身体 的 危害 。 

加 电子 邮箱 想 要 在 平时 护 肝 ， 可 以 试 试 白 薄 花 茶 和 构 杞 条 ， 白 落花 和 构 杞 帮 有 消 古 保 秆 的 作用 。 佛 手 花 和 玫 现 花 则 能 玻 肝 理气 ， 
Jreammymavy163. com 订 来 光 共 更 也 

上 比 外 ， 钵 课 男 平时 一 十 要 多 吃 维生素 C 售 最 商 的 水 果 ， 比 如 橙子 ， 恬 子 等 ， 维 生 素 B 能 保护 消化 系统 ， 也 可 以 适量 补 
些 ， 饮 食 要 注意 避免 信用 大 全 大 肉 ， 这 些 东西 太 油 及 ， 容 易 伤 肝 。 

老 侧 枪 罗汉 果 泡 水 

抽 雷 村 脐 造 成 伤害 ， 这 是 众所周知 的 事实 ， 但 是 大 家 可 能 不 知道 ， 香 烟 中 的 有 省 物质 被 血液 吸收 捕 ， 还 会 引发 心血 管 
疾病 ， 如 冠 心病 、 高 血 有 常 哮 贱 ， 这 是 因为 香烟 中 的 有 害 物质 污染 了 口腔 和 咽喉 部 位 .所 以 ， 烟 
枪 男 们 ， 还 是 赶快 成 烟 吧 。 

专家 推荐 ， 保 护 咽 咀 ， 很 多 人 第 一 个 联想 到 的 一 定 是 有 大 海 ， 其 实 岁 大 海 只 有 涧 唆 的 作 



























值得 推荐 的 是 罗汉 困 泡 
水 
每 一 份 当 作 一 天 的 菜 时 岁 ， 用 水 泡 着 喝 ， 直 到 没有 





方法 将 一 个 乒乓 球 大 小 的 及 汉 果 用 小 甸 
味道 为 上 

罗 仅 果 的 时 过 又 营 又 甜 ， 不 太 好 喝 ， 但 

另外 ， 百 合 、 葛 卜 汤 、 川 贝 水 粮 菩 和 


有 根 好 的 清 哎 种 路 的 功效 
3 果 等 能 止咳 化 关 ， 是 不 错 的 莽 防 食物 ， 不 妨 试 斌 
每 天 学 在 电脑 前 氢 狂 迁 关 的 男人 和 长 时 间 开 车 的 有 车 一 族 ， 才 存在 用 眼 过 度 、 久 举 不 动 的 情况 。 别 以 为 每 天 对 着 电脑 
伤害 的 只 是 跟 睛 ， 中 医 有 “ 久 视 伤 “ 久 坐 伤 骨 ”， 针 对 这 样 的 男士 ， 专 家 b， 多 银 粮 。 
专家 建议 ， 保 肝 护 肝 多 吃 红 惠 与 梅 忆 。 另外， 村 全 阔 核桃 可 以 补 晴 
专家 推荐 ， 不 论 是 看 电脑 还 是 开车 都 很 费 眼 附 ， 所 以 ， 建 议长 时 间 用 眼 的 人 多 玛 消 肝 中 目的 菠 花 
多 旋 此 棚 观 卜 和 维生素 A 片 ， 以 保护 视力 ， 防 止 限 侨 
针 寻 “ 久 举 伤 所 ”这 一 点 ， 豌 戏 狂人 和 开车 一 话 对 以 参照 消息 男 的 保健 食 讶 ， 半 时 多 吃 毕 
比 外 ， 入 坐 的 人 特别 会 发 尾 ， 容 易 串 毅 血 及 症 ， 这 类 人 群 击 要 服用 一些 具备 竹 压 调 脂 、 
次 、 决 明子 茶 ， 也 会 有 不 错 的 效果 
临床 上 用 于 沦 疗 这 此 疾病 的 药物 有 很 多 ， 疗 效 也 各 不 相同 ， 有 的 药品 价格 不 菲 ， 让 很 多 人 吃不消 。 殊不知， 在 日 带 生 
就 有 不 少 对 性 功能 问题 有 铺 助 疗效 的 食物 知 的 红 于 就 是 其 中 之 











、 移 忆 茶 。 还 可 以 









生 素 含量 高 的 水 果 
肥 功 能 的 茶 饮 ， 试 试 苦 丁 


















问 道 茶具 
电话 : 0000-0000000 EE XXXOG 


此 XXXXX 省 XXXXXXXX 市 XXXXXXXIXIXKX 
XXXX 科 技 和 有 


共 文 艺 网 





图 3-18 
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34 设计 ' 产 品 展 示 "” 版 面 


“产品 展示 ”是 向 访问 者 展示 公司 /企业 产品 信息 的 窗口 ,主要 由 产品 展示 列表 页 和 产品 
dd 其 中 产品 展示 列表 页 通常 以 * 缩 略图 ?形式 展示 ,当然 ,也 可 以 用 * 缩 略图 十 

品 标题 ”形式 展示 ,而 产品 展示 内 容 页 以 “产品 标题 十 产品 详细 内 容 ”( 包 括 产 品 的 价格 、 型 
ey pct eit 

1. 设计 “产品 展示 ”列表 页 版 面 

(1) 设计 “产品 展示 ”列表 页 版 面 结构 草 图 

该 版 面 结构 草图 如 图 3-19 所 示 。 
































F 1000 px | 
页 头 
焦点 幻灯 
侧 边 栏 sidebar 产品 缩 咯 图 刘表 
页 时 
图 3-19 


(2) 设计 “产品 展示 ”列表 页 版 面 

在 设计 该 版 面 的 过 程 中 ,找到 茶具 的 图 片 素材 后 ,应 进行 进一步 加 工 , 特 别 是 在 图 片上 
a 3-20 所 示 。 
28 
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网 站 首页 甩 , 二 二 让 时 时 3 给 我 留言 。 联系 我 们 





前 于 全 妆 百 浇 床 审 | 
入 党 全 加 网 半 对 祝 | 
多 话 并 有 二 也 西 中 
兆 必 过 闹 琢 翅 双 路 
肌 几 已 央 王 京 加 六 





首页 > 产品 展示 





客服 | 
#2， 


24 小 时 服务 热线 
© 


go 柚 信 公众 号 


dronmmyl 8 


电子 邮箱 


dreanmymavy@163. com 





SlellalElel 








0000-0000000 E-aail:XIXOXBXIXCXXOMX 
扯 。XXOX 省 XXX 市 XIXXICDCOX 
持 ，XXKCXKXKCXKXIXIX 科 技 有 限 公司 


技 
友情 链接 : 中国 茶叶 网 。 鞭 文 艺 网 





图 3-20 
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2. 设计 “产品 展示 ”内 容 页 版 面 

“产品 展示 ?内 容 页 是 图 文 并 茂 地 展示 产品 详细 内 容 的 页 面 , 对 于 产品 的 内 容 则 是 由 网 
站 后 台 进 行 发 布 并 管理 的 ,因此 ,在 设计 该 页 面 的 时 候 , 以 图 文 并 茂 的 方式 显示 产品 内 容 最 
佳 ,这 样 有 利于 体现 页 面 的 效果 以 增加 客户 对 此 版 面 的 认可 度 。 

(1) 设计 “产品 展示 ”内 容 页 版 面 结构 草 图 

该 版 面 结构 草 图 如 图 3-21 所 示 。 








f 1000 px 
页 关 








焦点 幻灯 








侧 边栏 sidebar 产品 办 容 




















图 3-21 


“产品 展示 ”内 容 页 版 面 的 页 头 、 焦 点 幻灯 、 侧 边栏 (sidebar) 以 及 页 脚 版 位 和 “产品 展 
示 ” 列 表 页 版 面 的 结构 是 一 致 的 ,对 于 产品 内 容 版 位 ,读者 应 注意 以 下 两 点 : 

@ 产品 内 容 版 位 的 高 度 在 设计 时 可 以 根据 实际 情况 进行 调整 

@ 产品 内 容 版 位 的 宽度 也 是 不 固定 的 ,在 设计 的 时 候 可 参考 常规 网 站 内 容 页 的 “ 左 一 
右 ” 结 构 宽度 进行 调整 。 
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(2) 设计 “产品 展示 ”内 容 页 版 面 
在 设计 该 版 面 时 ,内 容 版 位 上 填充 的 内 容 应 符合 主题 ,该 版 面 如 图 3-22 所 示 。 










= 
食 仿 用 用 。 是 
适 面 记 市 企 
半 对 中 由。 辐 
上 闪现 保 
其 于 村 有 。 让 
的 的 全 宁 宅 
从 痰 活 韶 变 
让 


24 小 时 服务 雪线 
[oy 


Gp SA 





委 示 只 


村 。 质 原 当 党 砂 
清单 县 喀 x1 和 茶杯 x6 











图 3-22 
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35 设计 “给 我 留言 "版面 


该 页 面 主要 用 于 访问 者 留言 ,通过 留言 有 利于 公司 /企业 收集 访问 者 或 产品 用 户 的 反馈 
信息 ,在 页 面 的 结构 上 ,与 前 面 的 页 面 结构 相似 ,在 留言 信息 上 具有 标题 ,称呼 .手机 .QQ、 
邮箱 ,内容 等 信息 输入 框 。 

1. 设计 “给 我 留言 "版 面 结构 草图 

该 版 面 结构 草图 如 图 3-23 所 示 。 


F 1000 px 











焦点 幻灯 








侧 边栏 sidebar 留言 填写 区 











页 脚 











图 3-23 


“给 我 留言 "版 面 的 页 头 、 焦 点 幻灯 、 侧 边栏 (sidebar) 以 及 页 脚 版 位 和 “产品 展示 ”内 容 
页 版 面 的 结构 是 一 致 的 。 而 留言 填写 区 则 是 让 访问 者 留言 ,增强 与 客户 的 互动 ,该 版 位 通常 
包括 留言 标题 ,称呼 、 手 机、QQ、 电 子 邮 箱 和 留言 内 容 , 在 下 一 步 版 位 设计 环节 ,应 体现 哪些 
是 必 填 的 选项 ,哪些 是 选 填 选项 ,以 增强 留言 者 的 用 户 体 验 ,通常 会 在 留言 信息 项 标题 前 用 
“x* ”表示 必 填 项 的 含义 或 在 留言 信息 项 右 侧 通过 文字 信息 提示 为 必 填 项 。 

2. 设计 “给 我 留言 ”版面 

在 设计 该 版 面 时 ,应 用 * ”符号 标记 必 填 的 信息 项 ,这 样 有 利于 提交 用 户 的 体验 ,该 版 
面 效果 如 图 3-24 所 示 。 
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网 站 首页 用 必 二 二 2 国生 示 给 联系 我 们 





= 让 

份 份 闲 六 天 

反面 放 市 ” 停 

加 芝 太 加 
真 葛 味 有 。 让 

的 的 生 宁 a 

从 淡 活 静安 河 
容 定 四 及 忆 帮 








凋 页 -) 纶 我 留言 
客服 !: EE 4 标题: 
客服 1， 和 

24 小 时 服务 热线 Fh 

9 QQ: 

二 邮箱 : 
微 信 公 众 号 
和 rmtts 











36 设计 ' 联 系 我 们 " 版 面 


该 页 面 的 目的 是 更 详细 地 向 访问 者 呈现 详细 的 联系 信息 ,该 页 内 容 通常 包括 公司 名 称 、 
公司 地 址 、 联 系 人 、 联 系 电话 、 手 机、 电子 邮箱 、 微 信 、 地 图 等 。 

1. 设计 * 联 系 我 们 ?版 面 结构 草图 

该 版 面 的 结构 草图 如 图 3-25 所 示 。 
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1000 px 
页 类 





























个 边栏 sidebar 联系 我 们 内 容 
页 脚 
图 3-25 


2. 设计 “联系 我 们 ”版 面 

在 设计 该 版 面 时 ,应 尽量 多 找 一 些 相关 的 “联系 我 们 ”类 的 图 片 素 材 , 经 过 加 工 处 理 后 用 
在 版 面 设 计 上 ,另外 ,还 可 以 在 该 页 面 显示 公司 或 企业 所 在 地 的 地 图 等 信息 。 该 版 面 设计 出 
来 的 效果 如 图 3-26 所 示 。 

“联系 我 们 ”页 面 版 面 的 页 头 、 焦 点 幻灯 、 侧 边栏 (sidebar) 以 及 页 脚 版 位 和 “产品 展示 ” 
内 容 页 版 面 的 结构 是 一 致 的 ,在 设计 该 版 面 的 结构 草图 时 ,应 重点 考虑 “联系 我 们 内 容 ” 版 位 
的 设计 ,虽然 该 版 位 的 内 容 是 网 站 开发 完成 后 ,由 管理 员 登 录 网 站 后 台 编 辑 该 版 位 内 容 。 但 
在 网 站 设计 与 开发 的 前 期 ,该 版 位 的 内 容 更 应 体现 预期 的 效果 以 增强 客户 的 认可 度 , 根 据 笔 
者 多 年 的 设计 经 验 ,该 版 位 的 内 容 通常 包括 

(1) 与 “联系 我 们 ”匹配 的 图 片 ; 

(2) 公司 的 基本 信息 (如 公司 名 称 、 地 址 、 联 系 人 、 联 系 电话 、 电 子 邮 箱 、 微 信 公 众 号 及 二 
维 码 等 信息 ); 

(3) 网 站 地 图 (动态 地 图 ); 

(4) 乘 车 线路 。 
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祠 严 号 疤 百 江东 节目 
符 洲 本 腿 卫 学 起 富 | 
部 用 记名 丘 访 囊 路 
事 首 寺 闹 生动 末路 
六 曲 下 请 动 训 枯 让 


和 





IE 


RE 


人 联系 我 们 WwW A 
Ou am 
微 信和 公众 号 外 @ 


和 


dreaammy168 
公司 名 称 : 广东 古道 茶 香 贸易 有 限 公司 
公司 地 址 ， 厂 东 省 惠州 市 惠 城区 
联系 人 : 张 十 

联系 电话 ，XOOUXOXXUO 


© 电子 孝 箱 


dreannynavyl 163, com 


手机 : OXON 


电子 邮箱 : dreammymavye163. com 











0000-0000000 E-mail1: OOO COUN 
KEHNAX 
:DCDOCOOOODOA 司 


友情 链接 ， 中 国 茶叶 间 基 
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工作 任务 4 版 面 切 


= 


(Cf nf 


。 能 够 根据 盒子 模型 知识 分 析 页 面 版 位 结构 。 
。 能 够 根据 网 站 版 面 图 并 利用 相关 软件 和 技术 形成 静态 页 面 。 
。 培养 学 生 良 好 的 代码 编写 习惯 和 吃苦 耐劳 的 精神 。 


(SA 知识 目标 

。 了 解 版 面 切 图 的 内 涵 。 

。 掌握 版 位 的 分 析 方法 。 
熟悉 版 面 切 图 的 过 程 及 方法 。 
掌握 DIV 十 CSS 网 页 布局 技术 。 
学 会 网 页 特效 的 应 用 。 


一 各 
【三 任务 描述 
本 次 任务 主要 是 利用 网 站 开发 相关 工具 和 相关 网 页 设计 技术 将 工作 任务 3 中 设计 出 来 
的 网 站 版 面 转 换 为 静态 网 页 。 


4.1 版 面 切 图 概述 


关于 版 面 切 图 ,没有 统一 的 定义 ,但 是 在 网 站 建设 行业 中 ,通常 会 出 现 “ 切 图 ”这 个 词 。 
读者 需要 注意 ,“ 切 图 ”这 个 词 并 不 是 传统 意义 上 的 切 图 ,而 是 指 把 网 站 的 版 面 图 转换 为 静态 
页 面 的 过 程 , 当然 ,在 转换 的 过 程 中 需要 使 用 相关 的 软件 (如 Photoshop、Fireworks、 
Dreamweaver 等 ) 和 相关 知识 技术 (如 HTML 语言 JavaScript 语言 .CSS、DIV 十 CSS 网 页 
布局 技术 等 ) 。 在 小 型 的 网 站 建设 公司 ,网 页 设计 师 ( 也 称 为 美工 ) 职 位 的 工作 职责 就 是 根据 
客户 的 需求 设计 网 站 的 版 面 ,并 利用 “ 切 图 ”技术 形成 静态 网 页 。 而 在 大 、 中 型 的 网 站 建设 公 
司 , 按 照 工作 过 程 划 分 的 职位 更 细 , 如 平面 设计 师 ( 或 界面 设计 师 ) 主 要 负责 设计 网 站 的 版 面 
图 ,网 页 设计 师 则 负责 把 网 站 版 面 图 利用 * 切 图 ?技术 转换 成 静态 网 页 。 
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42 “首页 ”版面 切 图 


首页 版 面 是 切 图 的 第 一 个 页 面 ,因此 在 切 图 前 ,新 建 一 个 文件 夹 web, 用 来 存放 相关 的 
页 面 文件 。 为 了 更 好 地 管理 网 站 的 文件 ,在 web 文件 夹 里 分 别 创建 
images、css、js、admin、 inc 子 文件 夹 ,在 admin 子 文件 夹 里 分 别 创建 
images js、css 文件 夹 。images 子 文件 夹 主要 用 来 存放 页 面 所 用 的 图 片 ， 
css 子 文件 夹 主要 用 来 存放 前 端 所 产生 的 CSS( 层 到 样式 表 ) 文 件 ,js 子 文 
件 夹 主 要 用 来 存放 前 端 使 用 的 JavaScript 文件 ,admin 子 文件 夹 主要 用 来 
存放 网 站 后 台 文件 ,inc 子 文件 夹 主要 用 来 存放 整个 网 站 全 局 调用 的 文件 
(如 网 站 的 数据 库 连 接 文件 等 )。 利 用 资源 管理 器 查看 web 目录 结构 ,如 
图 4-1 所 示 。 图 4 


4.2.1 “页 头 ” 版 位 切 图 


1.“ 页 头 ” 版 位 分 析 

使 用 Fireworks CS6 打开 首页 版 面 源 文件 进行 分 析 , 确 定 哪些 图 片 是 需要 使 用 Web 工 
具 箱 的 “切片 ”工具 切 出 的 (建议 那些 能 通过 非 “ 切 片 ” 工 具 的 ,尽量 使 用 非 切 片 的 方式 导出 图 
片 ), 同 时 使 用 相关 工具 (在 Fireworks CS6 中 可 使 用 矢量 工具 箱 的 “度量 工具 ”) 确 定 该 版 位 
的 尺寸 。 

(1) 版 位 的 尺寸 

确定 版 位 的 高 度 。 常 用 的 方法 有 两 种 ,一 种 是 利用 “度量 工具 ”进行 度量 得 出 , 另 一 种 方 
法 是 通过 该 版 位 图 层 对 象 高 度 得 出 ,该 版 位 的 高 度 是 120px; 对 于 该 版 位 的 宽度 ,最 外 层 左 
右 两 边 为 自动 伸展 直至 占 满 父 级 容器 的 宽度 (此 处 父 级 元 素 为 body), 主 体内 容 宽 度 
为 1000px。 

(2) 需 切 出 或 导出 的 图 片 

@ 版 位 的 背景 。 由 分 析 可 知 ,该 版 位 的 背景 颜色 无 渐变 变化 或 不 存在 不 规则 的 图 案 或 
底 纹 , 因 此 ,只 需 确定 背景 颜色 即 可 ,背景 颜色 为 # 8C2300。 

@ 网 站 的 标题 或 Logo。 直 接 选中 标题 ,复制 并 粘贴 到 创建 的 新 文件 中 ,并 将 该 文件 的 
画布 背景 颜色 设 为 “无 ,然后 导出 该 图 片 ,图 片 名 为 logo. png。 

@ 导航 的 hover 背景 图 , 即 当 指针 放 到 导航 上 时 ,将 会 出 现 白 色 的 圆 角 矩形 背景 ,选中 
该 白色 矩形 背景 图 ,然后 导出 并 保存 为 menu_bg_h. png。 

2. 编写 代码 实现 “页 头 ”效果 

(1) 使 用 Dreamweaver 创建 一 个 新 的 页 面 文件 ,并 取 名 为 index. html, 然 后 保存 在 
web 文件 夹 里 ,再 在 二 body> 与 一 /body 之 标签 之 间 编 写 页 头 的 结构 与 内 容 代码 ,代码 
如 下 。 
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<meta charset= "utf_ 8"> 
<title> 无 标题 文档 < /title> 
< ! 一 这 里 将 使 用 链接 式 把 css 文件 链接 进来 --> 
< /head> 
<body> 
< !-- 页 头 开始 --> 
<div class="top"> 
<div class="center"> 
<div class= "logo">< /div> 
<div class= "menu"> 
<a href=""> 网 站 首页 < /a> 
<a href=""> 关 于 我 们 < /a> 
<a href=""> 新 闻 动态 < /a> 
<a href=""> 产 品 展示 < /a> 
<a href=“guestbook.php”> 给 我 留言 </a> 
<a href=""> 联 系 我 们 < /a> 
</div> 
</div> 
</div> 
<t-- 页 头 结 来 -一 > 
</body> 
</html> 


(2) 创建 CSS 文件 “style. css”, 并 保存 在 路 径 %web/css” 中 ,然后 通过 超 链接 的 方式 把 
CSS 文件 引入 到 index. html 页 面 中 ,引入 的 代码 放 在 二 head 二 与 二 /head 二 标签 之 间 即 可 。 
引入 文件 style. css 的 代码 如 下 : 


<link href="css/style.css" rel="stylesheet" type="text/css"> 


CSS 文件 代码 如 下 。 
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/* 全 局 样式 * / 

# {padding: Opx;margin: Opx;} 

a {text- decoration: none;color:#000;} 

ul{list- style:none;} 

/* 页 头 样式 * / 

‘top {height: 120px;background:# 8C2300;} 

.top.center {height: 120px;width: 1000px;margin: 0 auto;} 

.top.center.1ogo {width: 141px;height: 42px;float: left;margin- top: 39px;} 
.top.center.menu {width: 670px;height: 40px;float: right;} 

.top. center. menu a {display: block; float: left;width: 110px; height: 40px; line 
— height: 40px;text- align: center; color: # FFF;margin- top: 40px; font- family: 
微软 雅 黑 ;} 

.top.center.menu a:hover {background: url(../images/menu bg h.png) center center no- 


repeat;color: #66973C;} 
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4.2.2 


“焦点 幻灯 ”版 位 切 图 


1.“ 焦 点 幻灯 ”版 位 分 析 

由 首页 源 文件 的 “焦点 幻灯 ”版 位 得 知 ,背景 颜色 为 # F6E4BC, 版 位 的 宽度 为 自 适应 ， 
主体 宽度 为 1000px, 高 度 为 380px, 该 张 幻灯 图 片 可 直接 使 用 “切片 ”工具 切 出 ,并 以 
“bannerl. jpg” 作 为 文件 名 保存 在 “web/images” 路 径 中 . 切 出 的 图 片 如 图 4-2 所 示 。 


葡 旗 沉 和 二 向 本 小 
敬 才 当 视 五 动 取 小 


部 天 信和 煌 百 溢 芭 地 1 

筷 洛 否 关 局 村 耻 字 | 
. 

院 浪 站 内 三 闷 关 站 





-过 


2. 编写 代码 实现 “焦点 幻灯 ”效果 
(1) 引入 焦点 幻灯 
焦点 幻灯 的 效果 代码 可 以 直接 从 “网 页 素材 网 "上 下 载 下 来 ,如 懒 人 图 库 上 就 有 非常 多 


的 网 页 设计 类 素材 ,建议 读者 平时 多 注意 收集 各 类 网 页 效果 素材 , 然 
后 进行 研究 ,至 少 要 学 会 如 何 修改 使 用 。 以 下 是 一 个 焦点 幻灯 的 素 


css 
Bimages 


材 , 它 主要 由 网 页 文件 index. html、 图 片 文件 (存放 于 images 文件 | 量 j 


夹 ) JavaScript 文件 (存放 于 js 文件 夹 ) 和 CSS 文件 (存放 于 css 文件 一 





二 indexhtml 


夹 ) 组 成 ,如 图 4-3 所 示 。 A 
使 用 软件 Dreamweaver 或 其 他 网 页 设计 软件 打开 index. html 文 
件 并 进行 分 析 。 代 码 如 下 。 


ww Rb 


< !doctype html> 

<html> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset= gb2312" /> 
< link rel="stylesheet" type=" text/css" href="css/jquery. jslides. css" media= 
"screen" /> 

<script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 

<script type= "text/javascript" src="js/jquery.jslides.js">< /script> 

<title> 自 适应 横向 宽屏 幻灯 片 代码 < /title> 

< /head> 

<body> 

< 上 -代码 开始 --> 

<div id- "full- screen- slider"> 
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<ul id "slides"> 
<1i style= "background:url ('images/01.jpg') no- repeat center top"> 
<a href="" target=" blank"> 第 一 张 焦点 幻灯 的 标题 < /a> 
</1i> 
<1i style= "background:url ('images/02.jpg') no- repeat center top"> 
<a href="" target=" blank"> 第 二 张 焦点 幻灯 的 标题 < /a> 
</li> 
</ul> 
</div> 
<!-- 代 码 结束 --> 
<Vbody> 
</html> 


上 述 代 码 中 ,第 5 行 是 焦点 幻灯 所 引用 的 CSS 文件 ,第 6 行 和 第 7 行 是 焦点 幻灯 所 引 
用 的 JavaScript 文件 。 第 12 一 21 行 是 在 页 面 中 输出 焦点 幻灯 图 片 的 代码 ,车 有 多 张 幻 灯 图 
片 ,可 按照 第 14 一 16 行 的 代码 格式 重复 添加 进去 即 可 ,当然 要 更 改 相应 的 图 片 路 径 。 

分 析 如 下 代码 ; 


<1i style= "background:url ('images/01.jpg') no- repeat center top"> 
<a href="" target=" blank"> 第 一 张 焦点 幻灯 的 标题 < /a> 


</li> 


由 以 上 代码 可 知 , 焦 点 幻灯 图 片 是 以 背景 图 片 的 方式 使 用 , 超 链接 标签 的 href 属性 则 
是 单 击 该 张 焦点 图 的 链接 地 址 ,二 a 二 与 二 /a 二 之 间 的 文本 则 是 幻灯 片 的 标题 。 

怎样 将 这 个 焦点 幻灯 片 效果 应 用 到 设计 的 网 页 上 呢 ? 

首先 ,要 将 相关 的 文件 以 "对 号 入座 ?的 方式 复制 到 前 期 创建 的 web 文件 夹 内 , 即 把 文 
件 夹 * 焦 点 幻灯 效果 (用 于 首页 焦点 幻灯 版 位 )” 中 的 CSS 文件 ,JavaScript 文件 以 及 图 片 文 
件 等 分 别 复制 到 web 文件 里 的 css 文件 夹 js 文件 夹 和 images 文件 夹 中 。 

接着 ,把 “焦点 幻灯 ”文件 夹 里 index. html 的 第 6 行 和 第 7 行 复制 到 web 文件 夹 中 
index. html 文件 的 二 head 二 与 二 /head 二 标签 之 间 , 把 “焦点 幻灯 ”文件 夹 中 index. html 文 
件 的 第 12 一 21 行 代码 复制 到 web 文件 夹 中 index. html 文件 “页 头 ” 版 位 代码 的 下 方 。 此 
时 ,首页 index. html 的 代码 如 下 。 


40 


< !doctype html> 

<html> 

<head> 

<meta charset= "utf- 8"> 

<title> 无 标题 文档 < /title> 

<link href="css/style.css" rel= "stylesheet" type= "text/css"> 

< link rel=" stylesheet" type="text/css" href="css/jquery. jslides. css" media= 
"screen" /> 

< script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 
< script type= "text/javascript" src="js/jquery.jslides.js"></script> 
</head> 

<body> 
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<div class= "logo"> < img src= "images/logo.png" width="141" height="42"> < /div> 









<1i style= "background:url ('images/01.jpg') no- repeat center top"> 


<a href="" target=" blank"> 第 一 张 焦点 幻灯 片 的 标题 < /a> 


<1i style= "background:url ('images/02.jpg') no- repeat center top"> 
<a href="" target=" blank"> 第 二 张 焦点 幻灯 片 的 标题 < /a> 


12 “< 上 -页 头 开始 --> 

13 <div class= "top"> 

14 <div class= "center"> 

15 

16 <div class= "menu"> 

17 <a href= 哇 "> 网 站 首页 < /a> 
18 <a href= 哇 "> 关于 我 们 < /a> 
19 <a href= 哇 "> 新 闻 动 态 < /a> 
20 <a href= 叶 "> 产品 展示 < /a> 
21 <a href= 哇 "> 给 我 留言 </a> 
22 <a href= 哇 "> 联系 我 们 < /a> 
到 </div> 

24 </div> 

25 </div> 

26 <!-- 页 头 结束 --> 

27 <!-- 焦 点 幻灯 开始 --> 

28 <div id="full- screen- slider"> 

29 <ul id=- "slides"> 

30 

31 

32 </1i> 

33 

34 

35 </1i> 

36 </ul> 

37 </div> 

38 ”<!-- 焦 点 幻灯 结束 --> 

39 < /body> 

40 </html> 

使 用 浏览 器 打开 


F 网 页 文件 index. html, 看 到 的 效果 图 如 图 4-4 所 示 ,说 明 焦点 幻灯 片 引 





入 成 功 ,但 细节 方面 还 需要 修改 。 


智能 网 站 管理 系统 


I 
内 三 和 ,安放 ， 届 吉 ， 丰 二 洒 委 ， 委 ， 风 作 ,关子 ，SEOUL， 
i 





图 


(2) 修改 细节 ,整合 问 道 茶具 网 站 页 面 





4-4 
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打开 所 引入 的 jquery. jslides. css 文件 ,删除 第 1 行 ,将 样式 属性 “background: 
#E6E4D5;” 增 加 到 复合 选择 器 # full-screen-slider 中 ,复合 选择 器 # full-screen-slider 和 id 
选择 器 # slides 中 的 “height: 396px” 修 改 为 “height: 380px”, 把 id 选择 器 # slides 中 的 
“width:100% ”修改 为 “width:1000px”, 此 时 ,页 面 的 效果 如 图 4-5 所 示 。 






智能 网 站 管理 系统 


分 人 不 ， 入 ( 要 ) ， 生 和 ( 于 要 .PFE 和、 向 定妆)】， 天 BG 类 
记者 广告， 企业 人 才 厅 二 在 打 单 得 于， 几 件 六 关 和 SEC 人 做， 二 
上， 区 


最 后 再 设计 一 张 * 焦 点 幻灯 ”版 位 的 图 片 , 切 出 后 蔡 换 现 有 的 这 两 张 焦点 幻灯 图 片 ,“ 焦 
点 幻灯 ”版 位 切 图 已 完成 ,此 时 首页 的 效果 如 图 4-6 和 图 4-7 所 示 。 





众生 全 言 联系 我 们 





这 二 并 次 坪 芭 古 小 
Bd 更 市 j 户 


半天 吕 和 百 沁 村 这 | 





网 站 首页 。。 关于 我 们 Ds 局 晴 示 。。 给 开 入 言 联系 我 们 
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4.2.3 “新 闻 动 态 “ 关 于 我 们 “最 新 产品 ”形成 横向 版 位 切 图 


1. 版 位 分 析 

通过 分 析 版 面 源 文件 可 知 以 下 内 容 。 

(1) 横向 版 位 与 “新 闻 动态 “关于 我 们 ”最 新 产品 ”版 位 的 关系 是 包含 与 被 包含 的 关 
系 , 如 果 用 盒子 模型 表示 ,效果 如 图 4-8 所 示 。 




















“新 闻 动 态 ” 盒 子 “关于 我 们 ”盒子 “最 新 产品 ”盒子 
































“ 模 向 版 面 ” 盒子 
4-8 


(2)“ 模 向 版 位 ”的 宽度 为 1000px, 高 度 为 310px。 

(3)“ 新 闻 动 态 ” 版 位 和 “最 新 产品 ”版 位 的 宽度 为 300px, 高 度 为 310px。 

(4)“ 关 于 我 们 ”版 位 的 宽度 为 380px, 高 度 为 310 px, 它 与 左右 盒子 的 间距 为 10px。 
2. 切 出 (或 导出 ) 该 版 位 图 片 

辆 提示 : 图 片 均 保存 在 web 文件 天 中 的 images 文件 夹 里 。 

(1)“ 新 闻 动 态 ” 版 位 中 ,导出 图 片 迪 ， 图 片 格式 为 JPG, 文 件 名 为 news_thumbnail. 


jpg; 导 出 图 片 ,图 片 格式 为 PNG ,文件 名 为 more. png。 
(2)“ 关 于 我 们 ”版 位 中 ,导出 图 片 ,图 片 格式 为 JPG , 文 


件 名 为 about_img. jpg。 


(3)“ 最 新 产品 ?版 位 中 ,导出 图 片 ;图 片 格式 为 JPG, 文 件 名 为 
produce_thumbnail_1. jpg。 

该 横向 版 位 需 导 出 的 图 片 已 完成 , 接 下 来 编写 该 版 位 的 结构 与 内 容 。 

3. 编写 该 横向 版 位 的 结构 与 内 容 代 码 


1 <!-- “新 闻 动 态 .关于 我 们 .最 新 产品 "形成 的 横向 区 域 开 始 --> 
2 <div class= "container"> 
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3 <!-- 新 闻 动 态 --> 

4 <div class= "news"> 

5 <div class="n top"> 

6 <div class= "cat title"> 新 闻 中 心 </div> 

| <div calss= "more"> 更 多 < /div> 

8 </div> 

9 < div class="n_ center"> < img src="images/news_ thumbnail. jpg" width="111" 
height="90">< div> 近 期 ,知名 品牌 厂商 不 断 有 高 性 价 比 的 新 茶 上 市 , 茶 业 门户 网 站 
及 微 信 公 众 平台 也 频频 举行 各 类 团购 茶 样 派发 活动 , 爱 茶 人 士 只 需 稍 加 留心 …… </ 
div> </div> 

10 <div class="n bottom"><a href= 叶 "> 养生 茶 , 喝 出 男性 健康 </a><a href= "#"> 茶 事 
起 源 : “六朝 以 前 的 茶 事 ”< /a><a href= " 嘎 " 红 碎 茶 红 艳 的 颜色 、 鲜 爽 的 香气 和 很 高 的 营 
养 价值 < /a><a hre 全 " 哩 "> 中 国 古 代 史 料 中 的 茶 字 和 世界 各 国 对 茶 字 的 音译 </a> <a href 
=" 只 "> 茶 是 用 来 喝 的 ”一 杯 陈 年 普洱 味道 </a>< /div> 


11 </div> 

12 <!-- 关 于 我 们 --> 

13 <div calss= "about"> 

14 <div class="a top"> 

15 <div class="cat title"> 关 于 我 们 < /div> 

16 </div> 

17 <div class="a_center">< img src= "images/about img.jpg" width="381" height="148" 
></div> 

18 <div calss="a_bottom"> 问 道 茶 具有 限 公 司 是 一 家 以 经 营 茶具 、 茶 周边 、 茶 叶 产 品 为 主 的 


新 型 茶 行业 电子 商务 公司 。 公 司 正式 成 立 于 2010 年 1 月 4 日 ,在 茶 行 业 我 们 一 直 秉持 着 
做 茶 就 是 做 人 的 原则 ,一 直 非常 自豪 地 走 在 茶 行 业 的 前 端 ,公司 现 有 运营 部 ,广告 部 .销售 


部 ,物流 部 四 个 常规 部 门 …… [详细 ] < /div> 
19 </div> 
20 <!-- 最 新 产品 --> 
21 <div class= "produce"> 
22 <div class="n top"> 
23 <div class="cat_title"> 新 闻 中 心 < /div> 
24 <div calss= "more"> 更 多 < /div> 
25 </div> 
26 <div class= "n_center"> 
27 < 上 -这 里 是 产品 缩 略 图 轻 播 效 果 --> 
28 </div> 
23 </div> 


30 </div> 

31 ”<!--“ 新 闻 动态 .关于 我 们 .最 新 产品 ”形成 的 横向 区 域 结束 --> 

在 最 新 产品 版 位 ,由 于 使 用 轮 播 的 方式 展示 最 新 产品 的 缩 略图 ,所 以 在 该 版 位 中 ,引入 
焦点 幻灯 片 效果 。 效 果 代 码 见 “教材 素材 ?文件 夹 中 的 “焦点 幻灯 效果 (用 于 首页 最 新 产 
品 )”, 使 用 的 方法 与 首页 幻灯 效果 (用 于 首页 最 新 产品 )” 文 
件 夹 , 将 看 如 到 的 目录 结构 如 图 4-9 所 示 。 

接着 把 该 效果 所 需 的 图 片 与 js 文件 复制 到 web 文件 夹 的 相应 子 文件 夹 中 ,由 于 前 面 
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Bimages 2016/4/6 23:33 文件 去 

js 2016/4/6 23:33 。。 文件 夫 

园 focushtml 2016/4/623:31 C360 se HTML Do.. 3 KB 
图 4-9 


“焦点 幻灯 ”版 位 已 将 jquery 库 文件 引入 ,所 以 这 里 不 必 将 jquery1. 42. min. js 文件 复制 过 
去 ,最 后 使 用 Dreamweaver 软件 打开 focus. html 文件 ,将 该 文件 的 第 32 一 43 行 代码 复制 到 
“最 新 产品 ”版 位 中 的 二 div class 二 "p_bottom" 祖 与 一 /div 之 之 间 , 操 作 完 成 后 并 适当 修改 


该 版 位 的 代码 ,代码 如 下 。 
到 < 上 -最 新 产品 --> 
2 <div class="produce"> 
3 <div class="p top"> 
4 <div class="cat_title"> 最 新 产品 < /div> 
5 <div class= "more"><a href= "> 更 多 < /a>< /div> 
6 </div> 
7 <div class="p bottom"> 
8 <!-- 这 里 是 产品 缩 略 图 轻 播 效 果 - -> 
9 <div id="slideBox" class="slideBox"> 
10 <div class="bd"> 
驶 <ul> 
12 <1i><a href="" target=" _ blank"> < img src="images/produce_ 
thumbnail 1.jpg" width="300" height= "270" /></a></li> 
Ek <1i><a href="" target=" blank"> < img src="images/produce_ 
thumbnail 2.jpg" width="300" height= "270" /></a></li> 
14 </u> 
15 </div> 
16 </div> 
和 < script type= "text/javascript"> 
18 jQuery (". slideBox") . slide ({mainCell:".bd ul", effect:"]left", autoPlay: 
true}); 
19 </script> 
20 </div> 
21 </div> 


最 后 ,将 JavaScript 文件 jquery. SuperSlide. 2. 1. 1.js 引入 到 页 面 中 。 

至 此 ,该 整个 横向 版 位 的 结构 与 内 容 代码 编写 完成 ,下 一 步 将 编写 CSS 代码 实现 该 版 
位 的 具体 表现 。 

4. 编写 CSS 代码 实现 版 位 的 具体 表现 

按照 从 左 至 右 的 版 位 顺序 编写 CSS 代码 ,实现 整个 横向 版 位 的 效果 。 具 体 代码 如 下 。 


wm 


/*“ 新 闻 动 态 、 关 于 我 们 、 最 新 产品 ”形成 的 横向 区 域 * / 
.container {width:1000px;height:310px;margin:0 auto;clear:both;} 
/* 新闻 动态 * / 
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以 上 代码 的 第 27 一 33 行 , 是 直接 从 最 新 产品 
然 也 可 单独 形成 该 


.container .news{width:300px;height :310px;float:left;} 
.container .news.n topfheight:35px;border- bottom:1px solid # 999;} 
.container.news.n top.cat title{float:left;height:35px; line- height:35px; font— size: 
15px; font— weight :bold;} 
.Container.news.n top.more a{width: 50px; text— align:center;background:url (../images/ 
more.png) center center no- repeat; height:35px; line- height: 35px; float:right; font— 
size:12px;color:# FFF;} 
.Container.news.n_ center{height:100px;padding- top: 5px;} 
:Container.news.n center img{float:left;margin- right: 5px;margin- top: 5px;} 
-Container.news.n center div{font- size:12px;line- height:20px;} 
.Container.news.n bottom{height:155px;margin- top:10px;} 
» Container. news. n_ bottanm a {display: block; height: 28px; line - height: 28px; font — 
Size:13px;color:#333;border- bottom:1px dotted # CCCCCC7} 
/* 关 于 我 们 */ 
.Container.about {width:380px;height:310px;float:left;margin- left:10px;} 
.container.about.a top{height:35px;border- bottom:1lpx solid #999;} 
.container.about.a top.cat title{float:left;height:35px;line- height:35px; font- size: 
15px; font— weight :bold;} 
.Container.about.a_center{margin:5px auto;} 
.container.about.a bottom{font- size:13px; line- height:20px; text- indent:2em;margin— 
top: Spx;} 
/* 最 新 产品 * / 
.container.produce{width:300px;height:310px;float:right;} 
.Container.produce.p_top{height:35px;border- bottom:1px solid #999;} 
:Container.produce.p_top.cat title{float:left;height:35px; line- height:35px; font— 
size:15px; font— weight:bold;} 
.container. produce.p_ top. more a {width: 50px; text -~ align: center; background: url (../ 
images/more.png) center center no- repeat; height: 35px; line- height:35px; float: right; 
font- size:12px;color:# FFF;} 
.container.produce.p bottom{height:270px;margin- top: Spx;} 
/* 图 片 切换 * / 
.3lideBox{ width:300px; height:270px; overflow:hidden; position:relative;} 
.SlideBox.hd{ height:15px; overflow:hidden; position:absolute; right:Spx; bottom: 
Spx; 2- index:1; } 
.SlideBox.hd ul{ overflow:hidden; zoom:1; float:left; } 
.slideBox.hd ul li{ float: left; margin- right:2px; width:15px; height:15px; line— 
height:14px; text-align:center; background:# fff; cursor:pointer; } 
.3lideBox.hd ul li.on{ background:# £00; color:# fff; } 
.3lideBox.bd{ position:relative; height:100% ; z- index:0; } 
.3lideBox.bd li{ zoom:1; vertical- align:middle; } 
.slideBox.bd img{ width:300px; height:270px; display:block;border:Opx;} 


点 幻灯 片 对 应 的 CSS 代码 复制 过 来 , 当 
幻灯 所 用 的 CSS 文件 ,然后 再 将 该 CSS 文件 使 用 超 链接 的 方式 引 








入 ,该 横向 版 位 的 效果 如 图 4-10 所 示 。 
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新 闻 中 心 更 多 由 关于 我 们 最 新 产品 更 多 


概 芋 人士 注意 瞪 
近期 ， 知名 品牌 厂商 不 断 有 高 性 价 
比 的 新 茶 上 市 ， 茶 业 门 户 网 站 及 微 


养生 条 ， 喝 出 男性 健康 


茶 事 起 源 : 以 前 的 革 事 ” 

古道 条 香 六 易 有 限 公 司 ， 是 中国 最 大 的 和 叶 经 营 企业 和 全 球 最 
红 碎 共 红 粮 的 颜色 、 评 现 的 香气 各 大 的 绿茶 出 口 企业 ，。 其 前 身 成 立 于 1950 年 ， 人 
中 国 二 代 史 料 中 的 茶 字 和 世界 各 到 对 荣 字 的 音译 。。 容 户 提 | 健康 、 优 的 茶叶 饮品 ， 以 茶 为 主 、 
7 人 元 发 展 ， 产 品 相关 训 叶 条 
荣 是 用 来 则 的 一 村 陈 年 普 汪 味 遂 网 络 六 及 全 球 六 十 多 个 国家 和 地 区 … … [详细 ] 


















图 4-10 


4.2.4 “页 尾 ” 版 位 切 图 


1. 版 位 分 析 

通过 分 析 首 页 版 面 源 文件 可 知 ,该 版 位 的 宽度 为 自 适应 ,主体 内 容 盒 子 的 宽度 为 
1000px, 并 且 居 中 对 齐 ,高 度 为 120px, 版 位 背景 颜色 为 #8C2300, 该 版 位 的 盒子 模型 如 图 4-11 
所 示 。 





版 权 等 文本 信息 二 维 码 图 片 














图 4-11 
2. 切 出 (导出 ) 该 版 位 的 图 片 
该 版 位 需 切 出 (或 导出 ) 的 图 片 仅 有 -水 上 导出 的 图 片 格式 为 PNG, 文 件 名 为 


ewm,. png。 


.编写 该 版 位 的 结构 与 内 容 代码 


» 


1 <!-- 页 尾 开 始 --> 

4 <div class= "footer"> 

E <div class= "center box"> 

4 <div class= "text"> 

5 问 道 茶具 <br /> 

6 电话 : 0000- 0000000 E-mail :O00XX@ OO000CXX<br /> 
7 地 址 : 2005 省 W000000 市 W0000000000C<br /> 

8 技术 支持 : woo000000000X 科技 有 限 公司 

9 


</div> 
10 <div class= "ewm"> 
11 < img src= "images/ewm.png" alt="" /> 
4 </div> 
13 </div> 
14 </div> 
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<!-- 页 尾 结束 --> 


4. 编写 CSS 代码 实现 “页 尾 ” 版 位 的 效果 


/* 页 尾 */ 

.footer {height :120px;background:# 66973C;clear:both;} 

.footer.center box{width:1000px;height:120px;margin:0 auto;} 

.footer.center box.text {height:105px;color:# FFF; float:left; line- height :23px; font— 
size:13px;padding- top:15px;padding- left:120px;} 

. footer. center box. ewm {height: 95px; float: right; text — align: center; padding- right: 

120px;padding- top:25px;} 


该 版 位 的 效果 如 图 4-12 所 示 。 


地 址 ; 
技术 支持 : 


友情 铺 





至 此 ,首页 的 版 面 切 图 已 完 
首页 文件 index. html 的 完整 代码 如 下 。 


wa ou ww 
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< !doctype html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title> 无 标题 文档 < /title> 
<link href= "css/style.css" rel= "stylesheet" type= "text/css"> 
< link rel="stylesheet" type="text/css" href="css/ijquery. jslides.css" media= 
"screen" /> 
<script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<script type= "text/javascript" src="js/jquery.jslides.js"></script> 
< script type=" text/javascript" src=" js/jquery. SuperSlide. 2.1.1.js"> 
< /script> 
</head> 
<body> 
< 二 -页 头 开始 -=> 
<div class= "top"> 
<div class= "center"> 
< div class= "logo"> < img src= "images/logo.png" width= "141" height= "42"> 
< /div> 
<div class="menu"><a href="index.html"> 网 站 首页 < /a><a href="about.html"> 关 于 
我 们 </a><a href="article list.htm"> 新 闻 动态 </a><a href= "produce list.html" 
> 产品 展示 < /a><a hre 人 "guestbook.html"> 给 我 留言 </a> <a href="contact.html"> 联 
系 我 们 < /a>< /div> 


工作 任务 4 版 面 切 图 
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</div> 
</div> 
<!-- 页 头 结束 --> 
< 上 -焦点 幻灯 开始 --> 
<div id="full- screen- slider"> 
<uUl id= "slides"> 
<1i style= "background:url ('images/banner1.jpg'") no- repeat center top"><a href="" 
target=" blank"> 第 一 张 焦点 幻灯 片 的 标题 < /a>< /1i> 
<1i style= "background:url ('images/banner?2.jpg') no- repeat center top"> <a href="" 
target=" blank"> 第 二 张 焦点 幻灯 片 的 标题 < /a>< /1i> 
</ul> 
</div> 
<!-- 焦 点 幻灯 结束 - -> 
< 二 -新闻 动态 .关于 我 们 ,最 新 产品 "形成 的 横向 区 域 开 始 --> 
<div class= "container"> 
<!-- 新 闻 动态 --> 
<div class= "news"> 
<div class="n top"> 
<div class= "cat_ title"> 新 闻 中 心 </div> 
<div class= "more"><a href=""> 更 多 < /a>< /div> 
</div> 
<div class= "n_center">< img src="images/news_ thumbnail.jpg" width="111" height=" 
90"> 
<div>< span style= "font-weight:bold;"> 爱 茶 人 士 注意 啦 </span><br /> 近期 ,知名 
品牌 厂商 不 断 有 高 性 价 比 的 新 茶 上 市 , 茶 业 门户 网 站 及 微 信 公 众 平台 也 频频 举行 各 类 团 
购 茶 样 派发 活 …… [<a href=""> 详 细 < /a>] 
</div> 
</div> 
<div class="n_bottom"><a href= 哇 "> 养生 茶 , 喝 出 男性 健康 </a><a href="#"> 茶 事 起 
源 : “六朝 以 前 的 茶 事 ”< /a><a hre 全 只 "> 红 碎 茶 红 艳 的 颜色 、 鲜 爽 的 香气 和 很 高 的 营养 
价值 < /a><a href="#"> 中 国 古 代 史 料 中 的 茶 字 和 世界 各 国 对 茶 字 的 音译 < /a><a href=" 
#"> 茶 是 用 来 喝 的 ”一 杯 陈 年 普洱 味道 < /a>< /div> 
</div> 
<1-- 关 于 我 们 --> 
<div class="about"> 
<div class="a top"> 
<div class="cat title"> 关 于 我 们 < /div> 
</div> 
<div class="a_center"> < img src="images/about img.jpg" width="381" height="148" 
></div> 
<div class="a_bottom"> 问 道 茶具 有 限 公司 ,是 中 国 最 大 的 茶叶 经 营 企业 和 全 球 最 大 的 绿 
茶 出 口 企业 ,其 前 身 成 立 于 1950 年 ,该 公司 致力 于 为 全 球 客户 提供 绿色 、 健 康 、 优 质 的 茶叶 
饮品 ,以 茶 为 主 , 工 贸 结 合 、 多 元 发 展 ,产品 覆盖 茶叶 、 茶 制品 .茶叶 机 械 、 有 机 农产品 等 , 销 
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售 网 络 遍 及 全 球 六 十 多 个 国家 和 地 区 …… [详细 ] < /div> 


</div> 
<!-- 最 新 产品 --> 
<div class= "produce"> 


<div class="p top"> 
<div class="cat title"> 最 新 产品 < /div> 
<div class="more"><a href=""> 更 多 </a></div> 
</div> 
<div class="p bottom"> 
<!-- 这 里 是 产品 缩 略 图 轻 播 效果 -- > 
<div id= "slideBox" class="slideBox"> 
<div class= "bd"> 
<ul> 
<1li><a href="" target=" blank"> < img src="images/produce 
thumbnail 1.jpg" width="270" height= "270" /></a></li> 
<1li><a href="" target=" blank"> < img src="images/produce_ 
thumbnail 2.jpg" width="270" height= "270" /></a></li> 
</ul> 
</div> 
</div> 
< script type= "text/javascript"> 
jQuery (". slideBox") . slide ({mainCell:".bd ul", effect:"]left", autoPlay: 





true}); 
</script> 
</div> 
</div> 
</div> 
< 上 -新 闻 动 态 . 关 于 我 们 ,最 新 产品 ?形成 的 横向 区 域 结 束 --> 
< 上 -页 尾 开 始 --> 


<div class= "footer"> 
<div class= "center box"> 
<div class= "text"> 
问 道 茶 具有 限 公 司 <br /> 
电话 : 0000- 0000000 ”已 -mail:X0O0OCXQ OOOOCXXX<br /> 
地 址 : X20CX 省 wo0000C 市 20G0CCOCCOOCC<br /> 
技术 支持 : ?200000000C00C 科技 有 限 公司 <br /> 
友情 链接 : <a href=- ""> 中 国 茶叶 网 < /a> gnbsp; snbsp;<a href=""> 茶 文艺 网 </a 
> 
</div> 
<div class= "ewm"> 
< img src= "images/ewm.png" alt="" /> 
</div> 
</div> 
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</div> 

<!-- 页 尾 结束 --> 
</body> 

</html> 


首页 (index. htm 了 有) 完整 的 CSS 代码 ( 含 全 局 样式 代码 ) 如 下 。 
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/* 全 局 样式 * / 

* {padding: Opx;margin: Opx;} 

a {text- decoration: none;color:#000;} 

ut{list- style:none;} 

/* 页 头 样式 * / 

.top {height: 120px;background: # 66973C;} 

"top.center {height: 120px;width: 1000px;margin: 0 auto;} 

.top.center.logo {width: 141px;height: 42px;float: left;margin- top: 39px;} 
.top.center.menu {width: 670px;height: 40px;float: right;} 

.top. center.menu a {display: block; float: left;width: 110px; height: 40px; line 
— height: 40px; text- align: center; color: # FFF;margin- top: 40px; font- family: 
微软 雅 黑 ;} 

.top.center.menu a:hover {background: url(../images/menu bg h.png) center center no- 
repeat;color: #66973C;} 


/* “新 闻 动 态 、 关 于 我 们 、 最 新 产品 "形成 的 横向 区 域 * / 

.container {width: 1000px; height: 310px; margin: 0 auto; clear: both; margin: 10px 
auto;} 

/* 新 闻 动 态 * / 

.Container .news{width:300px;height:310px;float:left;} 
.Container.news.n_top{height:35px;border- bottom:1px solid #999;} 

.Container.news.n top.cat title{float:left;height:35px;line- height:35px; font- size: 
15px;font- family: 微 软 雅 黑 ;} 

.container.news.n_top.more a{width:50px; text- align:center;background:url (../images/ 
more.png) center center no- repeat; height:35px; line- height: 35px; float:right; font— 
3ize:12px;color:#FFF;} 

.Container.news.n_center{height:100px;padding- top:5px;} 

.Container.news.n center img{float:left;margin- right:5px;margin- top:Spx;} 
.container.news.n_center div{font- size:12px;line- height:20px;} 

.Container.news.n bottom{height:155px;margin- top:10px;} 

.container.news.n_bottom a{display:block; height: 28px; line- height: 28px; font- size: 
13px;color:# 333;border- bottom: lpx dotted #CCCCCC;} 

/* 新 闻 动态 * / 

.Container.about {width:380px;height:310px;float:left;margin- left:10px;} 
.container.about..a top{height :35px;border— bottom:1px solid # 999;} 

.container.about.a top.cat title{float:1left;height:35px; line- height: 35px; font— 
size:15px;font- family: 微 软 雅 黑 ;} 

.container.about.a_center{fmargin:5px auto;} 

.container.about.a bottom{font- size:13px;line- height :20px;text— indent :2em;margin— 
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/* 最 新 产品 * / 

.container .produce{width:300px;height:310px;float:right;} 

.container .produce.p_ top{height :35px;border-bottom:1px solid #999;} 

.container.produce.p_top.cat title{float:left;height:35px; line- height:35px; font— 
size:15px;font- family: 微 软 雅 黑 ;} 

. container. produce.p_top. more a {width: 50px; text- align: center; background: url (../ 

images/more.png) center center no- repeat;height:35px; line- height:35px; float:right; 

font- size:12px;color:# FFF;} 

.Container .produce.p bottom{height:270px;margin- top:5px;} 

/* 图片 切换 * / 

.SlideBox{ width: 270px; height:270px; overflow: hidden; position: relative;margin— 
left:15px;} 

.SlideBox.hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom: Spx; 
z-index:1; } 

"SlideBox.hd ul{ overflow:hidden; zoom:1; float:left; } 

.slideBox.hd ul li{ float:left; margin- right:2px; width:15px; height:15px; line- 
height:14px; text- align:center; background:# fff; cursor:pointer; } 

.SlideBox.hd ul li.on{ background:# £00; color:# fff; } 

.3lideBox.bd{ position:relative; height:100%; z-index:0; } 

.SlideBox.bd li{ zoom:1; vertical- align:middle; } 

.31ideBox.bd img{ width:300px; height:270px; display:block;border:0px;} 

/* 页 尾 */ 

.footer{height:120px;background:# 66973C;clear:both;} 

.footer.center box{width:1000px;height:120px;margin:0 auto;} 

.footer.center box.text{height:105px;color:# FFF;float:left;line- height :20px; font— 
3ize:13px;padding- top:13px;padding- left:120px;} 

.footer.center box.text a{color:#FFF;font- size:13px;} 

. footer. center_box. ewm{height: 95px; float: right; text — align: center; padding— right: 
120px;padding- top:25px;} 


/*“ 关 于 我 们 页 面 . 新 闻 动 态 页 面 、 产 品 展示 页 面 、 给 我 留言 页 面 、 联 系 我 们 页 面 " 共 用 部 分 样 


-main{width:1000px;min- height:360px;height:auto;margin:0 auto;} 

/* slide* / 

.3lide{height:360px;width:220px; float:left;border:1px solid # 66973C;margin- top: 5px; 
margin- bottom: Spx; } 

.slige.cat title{height: 40px; line- height: 40px; padding— left:20px; font- size: 14px; 
Color:#FFF;font— weight :bold;background- color:# 66973C;} 

.slide. qq{height:85px; width: 190px; border— bottom: lpx dotted # D6D6D6; margin:0 auto; 
padding- left:10px;font-— size:14px;margin- top:15px;} 

.slide.qq div{height:42px; line— height:42px;margin:0 auto;} 
.sligde.service{height:58px;line- height:24px;width:160px;border- bottom:1px dotted # 
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66973C;margin:0 auto;padding- top: 10px;background:url (../images/clock.jpg) 8px center 


no- repeat ;padding— left:40px;} 


63 .slide.service.title{font- weight:bold;font- size:14px;} 
64 .slide.service.detail{color:#F63;font- size:14px;; 
65 .slide.weixin{height:58px;line- height:24px;width:160px;border- bottom:1px dotted # 


66973C;margin:0 auto;padding- top:10px;background:url (. ./images/weixin.jpg) 8px center 


no- repeat;padding- left:40px;} 


66 .slide.weixin.title{font- weight:bold;font- size:14px;} 
67 .slide.weixin.detail{color:#000;font- size:13px;font-weight:100;} 
68 .slide.email {height:58px;line- height:24px;width:160px;border- bottom:1px dotted # 


D6D6D6;margin:0 auto;padding- top:10px;background:url (../images/email.jpg) 8px center 


no- repeat;padding- left:40px;} 


69 .Slide.email.titleffont-weight:bold;font- size:14px;} 

70 .Slide.email .detail{color:#000;font— size:13px;font— weight:100;} 

71 /x*right*/ 

72 .right {min- height:360px;height:auto;width:760px;float:right;} 

3 .right .submenu{height:30px; line- height:30px;width:750px;border- bottom: lpx solid # 


666;padding-— left:10px;} 
74 .right.submenu affont- size:14px;color:# 000; font— size:13px;} 


通过 浏览 器 打开 首页 文件 index. html, 所 看 到 的 效果 如 图 4-13 和 图 4-14 所 示 。 





网 首页 。 关于 R 们 。 打 交 埃 吉 。 产 联系 我 们 








人 
春 汶 妆 桨 所 过 面 中 
隐 澳 站 记 更 市 忆 记 


新 关 玉 和 豆 浊 区 地 | 
高 洲 全 抽风 导 四 字 1 


外 








图 4-13 
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图 4-14 


43 “关于 我 们 ”版面 切 图 


由 版 面 源 文件 可 知 ,“ 关 于 我 们 ”版 面 的 “页 类 ”版 位 幻灯 ”版 位 和 “页 尾 ” 版 位 与 首 
页 相同 ,因此 ,该 页 面 只 需 完成 侧 边 栏 sidebar 版 位 和 右 侧 “关于 我 们 ”内 容 版 位 切 图 即 可 , 它 
们 形成 的 盒子 模型 如 图 4-15 所 示 。 















关 十 我 们 的 内 容 





slidebar 














about_main 


图 4-15 
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4.3.1 


“ 侧 边栏 sidebar” 版 位 切 图 


1. 版 位 分 析 
通过 分 析 版 面 源 文件 可 知 ,该 版 位 的 宽度 为 220px, 高 度 为 360px, 该 版 位 的 盒子 模型 


如 图 4-16 所 示 。 









































2. 切 出 (或 导入 ) 该 版 位 的 图 片 在 线 客服 
(1) QQ 在 线 客 服 图 标 , 只 要 来 源 于 QQ 在 线 客 服 的 API, 因 此 
无 须 导 出 该 图 标 。 QQ 客服 
(2) 时 钟 小 图 标 导 出 图 片 为 clock. jpg。 
(3) 微 信 图 标 导 出 图 片 为 weixin. jpg。 24 小 时 服务 热线 
(4) 电子 邮箱 图 标 导 出 图 片 为 email. jpg。 
3. 编写 该 版 位 结构 与 内 容 代码 
微 信 公 众 号 
1 <!--about main 开始 --> 
2 <div class="about main"> 
3 < !-- 侧 边栏 sidebar- -> 电子 邮箱 
4 <div class="slide"> 
5 <div class="cat_title"> 在 线 客服 < /div> 图 4-16 
6 <div class= "gq"> 
时 <div> 客 服 1: < img style= "CURSOR: pointer" onclick= "javascript :window.open(' 
http://b.qq.com/webc.htm? new= 0&sid= 382526903g0=http://&q=7', '_blank', ' 
height= 502, width= 644,toolbar=no,scrollbars=no,menubar=no, status=no');" 
border= "0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt=" 欢 迎 咨 询 ">< /div 
站 
8 <div> 客 服 2: < img style= "CURSOR: pointer" onclick= "javascript:window.open(" 
http://b.qq.com/webc.htm? new= 0&sid= 382526903so= http://&q= 7'，'_blank'，" 
height= 502, width= 644, toolbar= no, scrollbars= no, menubar= no, status= no');" 
border= "0" SRC=http://wpa.qg.com/pa? p=1:382526903:7 alt=" 欢 迎 咨询 ">< /div 
9 </div> 
10 <div class="service"> 
11 <span class="title">24 小 时 服务 热线 < /span> <br /> 
把 <span class= "detail"> 0000- 0000000< /span> 
13 </div> 
14 <div class= "weixin"> 
15 <span class="title"> 微 信 公 众 号 <br /> 
16 <span class= "detail"> dreammy168< /span> 
</div> 
18 <div class="email"> 
19 <span class= "title"> 电 子 邮 箱 <br /> 
20 <span class= "detail"> dreammymavye 163.com< /span> 
21 </div> 
22 </div> 
23 
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上 述 第 7 行 和 第 8 行 的 代码 为 QQ 在 线 客服 调用 代码 ,可 以 直接 到 腾讯 客户 管理 系统 的 
在 线 状态 页 面 (http://bizapp. qq. com/ webpres. htm) 进行 设置 并 生成 网 页 代码 ,如 图 4-17 
所 示 。 








说 明 : 这 些 代码 的 作用 是 显示 您 的 在 线 状态 的 图 慰 ， 并 允许 任何 人 向 您 发 起 临时 会 话 

















图 4-17 

4. 编写 CSS 代码 实现 该 版 位 的 效果 

1 。。”/* 关于 我 们 页 面 --------------------------------------------- */ 

2 -about main{width:1000px;min— height:360px;height :auto;margin:0 auto;} 

全 /* slidqe* / 

4 -about main.sligde{height:360px;width:220px; float: left;border: lpx solid #CCC;margin 
-top:S5px;margin- bottom: 5px;} 

EE .about main.slide.cat title{height: 40px; line- height: 40px; padding-— 
left:20px; font- size: 14px; color: # FFF; font- weight: bold; background— 
color:#66973C;} 

6 .about_main. slide. qq {height: 85px; width: 190px; border - bottom: 1px dotted # D6D6D6; 
margin:0 auto;padding- left:10px; font— size:14px;margin- top:15px; } 

.about main.slide.qq div{height:42px;line- height:42px;margin:0 auto;} 

8 .about main.slide.service {height:58px; line- height:24px;width:160px;border- bottom: 


lpx dotted # 66973c; margin: 0 auto; padding— top: 10px; background: url (../images/clock. 
56 
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jpg) 8px center no- repeat;padding- left:40px;} 

-about main.slide.service.title{font— weight:bold;font— size:14px;} 

-about main. slide. service. detail {color:# F63; font- size:bold; font- family:Arial, 
Helvetica, sans- serif;font- size:14px;;} 

.about main.slide.weixin{height: 58px; line— height: 24px; width:160px; border— bottom: 
lpx dotted # 66973C;margin:0 auto; padding— top: 10px; background: url (../images/weixin. 
jpg) 8px center no- repeat;padding- left:40px;} 

-about main.slide.weixin.title{font— weight :bold;font-— size:14px;} 

.about main. slide. weixin. detail {color:# 000; font- size: bold; font- family: Arial, 
Helvetica, sans- serif;font-— size:13px;} 

“about main.slide.email {height:58px; line- height:24px;width:160px;border- bottom: lpx 
dotted # D6D6D6; margin: 0 auto; padding— top: 10px; background: url (../images/email. jpg) 
8px center no- repeat;padding- left:40px;} 

-about main.slide.email.title{font- weight:bold;font- size:14px;} 

"about main. slide. email. detail {color: # 000; font - size: bold; font- family: Arial, 


Helvetica, sans- serif;font- size:13px;} 


上 述 第 2 行 代码 中 ,“min-height:360px” 主 要 用 于 设置 最 小 的 高 度 , 当 about_main 盒 
子 里 面 内 容 的 高 度 小 于 360px,about_main 盒子 的 高 度 是 360px; 若 about_main 盒子 里 面 
的 内 容 高 度 大 于 360px 时 ,about_main 盒子 的 高 度 由 实际 高 度 决定 。 


4.3.2 


“关于 我 们 ”内 容 版 位 切 图 


1. 版 位 分 析 
由 该 版 面 的 源 文件 可 知 ,该 版 位 的 盒子 模型 如 图 4-18 所 示 。 








这 是 页 内 导航 “ 盒 了 ” 








这 是 “关于 我 们 内 容 ” 合子 




















= = =3 
这 是 “关于 我 们 内 容 ” 版 位 最 外 层 盒 了 


图 4-18 





2. 切 出 (或 导入 ) 该 版 位 的 图 片 
该 版 位 没有 需要 切 出 (或 导入 ) 的 图 片 。 
3. 编写 结构 与 内 容 的 代码 


和 
受 
3 


<!-- 关 于 我 们 内 容 --> 
<div class= "right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-> 关 于 我 们 < /div> 
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<div class- "content"> 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 
容 关于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 
我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 
容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 。 
</div> 

</div> 


上 述 代 码 放 于 侧 边栏 sidebar 版 位 的 结构 内 容 代码 的 第 22 行 代 码 后 面 。 
4. 编写 CSS 代码 实现 该 版 位 的 效果 


am wb PP 
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/* right*/ 

.about main .right{min-height:360px;height:auto;width:760px;float:right;} 

.Content {padding:5px;line- height:22px;font- size:13px;text- indent :2em;} 

ji 册页 剧 航 ==== = */ 

. submenu {height: 30px; line— height: 30px; width: 750px; border- bottom: lpx solid # 666; 
padding- left:10px;} 

:right .submenu affont- size:14px;} 


上 述 代 码 第 4 一 6 行为 内 页 导航 代码 ,因为 在 后 面 的 页 面 中 仍然 多 次 使 用 到 页 内 导航 ， 
因此 ,将 页 内 导航 的 样式 独立 出 来 以 便 使 用 。 

至 此 ,该 页 面 的 切 图 就 完成 了 。 

关于 我 们 页 面 (about. html) 的 完整 代码 如 下 。 
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< !doctype html> 

<html> 

<head> 

<meta charset= "utf- 8"> 

<title> 无 标题 文档 < /title> 

<link href= "css/style.css" rel= "stylesheet" type= "text/css"> 

< link rel= "stylesheet" type= "text/css" href="css/jquery.jslides.css" media=" 

screen" /> 

<script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 

<script type= "text/javascript" src="js/jquery.jslides.js"></script> 

< script type=" text/javascript" src="js/jquery. SuperSlide. 2. 1. 1. js" > 
< /script> 

</head> 

<body> 

<!-- 页 头 开始 --> 

<div class= "top"> 

<div class= "center"> 

< div class= "logo"> < img src= "images/logo.png" width= "141" height= "42"> < /div 
> 
<div class= "menu"><a href="#"> 网 站 首页 </a><a href="#"> 关 于 我 们 </a> <a href 
= 叶 吃 新 闻 动态 </a><a hre 全 嘎 "> 产 品 展示 </a><a href= 叶 "> 给 我 留言 </a> <a href 


= 啡 "> 联系 我 们 </a></div> 
</div> 
</div> 
<!-- 页 头 结束 --> 
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< 二 -焦点 幻灯 开始 --> 
<div id="full- screen- slider"> 
<ul id="slides"> 
<1i style= "background:url ('images/bannerl1.jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 一 张 焦点 幻灯 片 的 标题 < /a>< /1i> 
<1i style= "background:url ('images/banner?2.jpg') no- repeat center top"> <a href= 
m target=" blank"> 第 二 张 焦点 幻灯 片 的 标题 < /a>< /1i> 
</ul> 
</div> 
< 二 -焦点 幻灯 结束 --> 
<!--about _ main 开始 --> 
<div class= "about main"> 
<!-- 侧 边栏 sidebar- -> 
<div class="slide"> 
<div class="cat title"> 在 线 客服 < /div> 
<div class="qq"> 
<div> 客 服 1: < img style= "CURSOR: pointer" onclick= "javascript:window.open 
('http://b.qq.com/webc.htm? new= 0&sid= 382526903&o= http://&q= 7"，' blank 
', "height= 502, width= 644,toolbar= no scrollbars=no,menubar=no, status=no 
');" border= "0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt= "欢迎 咨询 " 
></div> 
<div> 客 服 2: < img style="CURSOR: pointer" onclick="javascript:window. 
open ('http://b.qq.com/webc.htm? new=0&sid=382526903&go=http://&q=7','_ 
blank', 'height= 502, width= 644, toolbar= no, scrollbars= no,menubar= no, 
status=no');" border="0" SRC=http://wpa. qq. com/pa? p= 1:382526903:7 
alt= "欢迎 咨询 ">< /div> 
</div> 
<div class= "service"> 
<span class= "title">24 小 时 服务 热线 </span><br /> 
<span class= "detail"> 0000- 0000000< /span> 
</div> 
<div class= "weixin"> 
<span class="title"> 微 信 公 众 号 <br /> 
< span class= "detail"> dreammy168< /span> 
</div> 
<div class="email"> 
<span class="title"> 电 子 邮 箱 <br /> 
< span class= "detail"> dreammymavy@ 163.com< /span> 
</div> 
</div> 
<!-- 关 于 我 们 内 容 --> 
<div class= "right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 关 于 我 们 </ 
a></div> 
<div class="content"> 
关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 
容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 
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内 容 关 于 我 们 内 容 关于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关 于 我 
们 内 容 关 于 我 们 内 容 关 于 我 们 内 容 关于 我 们 内 容 关 于 我 们 内 容 。 

56 </div> 

57 </div> 

58 </div> 

59 <!--about main 结束--> 

60 <!-- 页 尾 开 始 --> 


61 <div class= "footer"> 


62 <div class= "center box"> 

63 <div class= "text"> 

64 问 道 茶具 <br /> 

65 电话 : 0000- 0000000 E-mail :XOOCXX@ WOOOCXXXX<br /> 

66 地 址 : XOCXX 省 W00000K 市 C000000CXKXX<br /> 

67 技术 支持 : 20ccccccococcx 科技 有 限 公 司 

68 </div> 

69 <div class= "ewm"> 

70 < img src= "images/ewm.png" alt="" /> 

11 </div> 

72 </div> 

73 </div> 

74 ”<!-- 页 尾 结束 --> 

75 </body> 

76 </html> 

关于 我 们 页 面 (about. html) 完 整 的 CSS 代码 如 下 。 

1 。”/* 关 于 我 人 页面------------------------------------------- #*/ 
2 -about main{width:1000px;min- height:360px;height:auto;margin:0 auto;} 

学 /x Slidex / 

4 .about main.slide{height:360px;width:220px; float:1left;border: lpx solid # CCCzmargin 


—top:5px;margin— bottom: Spx;} 

5 .about main.slide.cat title{height: 40px; line- height: 40px; padding- 
left:20px; font- size: 1 4px; color: # FFF; font- weight: bold; background-— 
color:#66973C;} 


6 .about_main. slide. qq {height: 85px; width: 190px; border - bottom: lpx dotted # D6D6D6; 
margin:0 auto;padding- left:10px;font- size:14px;margin- top:15px;} 
学 -about main.slide.qq div{height:42px;line- height:42px;margin:0 auto;} 


-about main.slide.service{height:58px;line- height:24px;width:160px;border- bottom: 
lpx dotted # 66973C; margin:0 auto; padding— top: 10px; background: url (../images/clock. 
jpg) 8px center no- repeat;padding- left:40px;} 


9 -about main.slide.service.title{font- weight:bold; font- size:14px;} 
10 -about main.slide.service.detail{color:#F63;font- size:14px;;} 
11 .about main.slide.weixin {height: 58px; line— height: 24px; width:160px; border— bottom: 


1px dotted # 66973C;margin:0 autoypadding- top: 10px; background:url (. ./images/weixin. 
jpg) Bpx center no- repeat;padding- left:40px;} 

12 .about main.slide.weixin.titleffont-weight:bold;font- size:14px;} 

13 .about main.slide.weixin.detail{color:#000;font- size:13px;} 


工作 任务 4 版 面 切 图 | 





14 .about main.slide.email {height:58px;line- height:24px;width:160px;border- bottom:1px 
dotted # D6D6D6; margin:0 auto; padding— top: 10px; background: url (../images/email .jpg) 


Bpx center no- repeat;padding— left:40px;} 


15 .about main.slide.email.title{font- weight:bold;font- size:14px;} 

16 .about main.slide.email.detail{color:#000;font- size:13px;} 

17 /x*right*/ 

18 .about main .right{min- height: 360px; height:auto; width:760px; float: 
right;} 

19 .content{padding:5px;line-height:22px;font- size:13px;text- indent:2em;} 

,te * 

21 .submenu {height:30px; line- height:30px;width:750px;border- bottom: 1px solid # 666; 


padding- left:10px;} 
22 -right .submenu affont- size:14px;} 


44 “新 闻 动 态 " 版 面 切 图 


新 闻 动 态 版 面 主要 由 新 闻 动 态 列表 页 和 新 闻 动 态 内容 页 组 成 ,通过 分 析 版 面 源 文件 可 
知 , 它 们 的 “页 头 ” 版 位 “焦点 幻灯 ?版 位 “ 侧 边栏 sidebar” 版 位 和 “页 尾 ” 版 位 与 “关于 我 们 ” 
页 面 的 相应 版 位 相同 ,因此 ,新闻 动 态 列表 页 版 面 的 切 图 只 需 完成 该 页 右 侧 * 文 章 标题 列表 ” 
版 位 的 切 图 即 可 , 同 理 , 新 闻 动 态 内 容 页 版 面 的 切 图 也 只 需 完 成 该 页 右 侧 “文章 内 容 ? 版 位 的 


切 图 即 可 。 
4.4.1 “新 闻 动态 列表 页 "版面 切 图 


1.“ 文 章 标题 列表 ”版 位 分 析 
该 版 位 的 宽度 为 760px, 最 小 高 度 为 360px, 该 版 位 的 盒子 模型 如 图 4-19 所 示 。 








页 内 导航 








义 章 标题 列表 


























2. 切 出 (或 导出 ) 该 版 位 的 图 片 
该 版 位 没有 需要 切 出 (或 导入 ) 的 图 片 。 
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3. 编写 该 版 位 结构 与 内 容 的 代码 


SL 


<!-- 文 章 标题 列表 -一 > 
<div class="right"> 
<div class="submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 新 闻 动 态 < /a> 
</div> 
<div class="article content"> 
<div class="row"> 
<div class= "title"> 茶 叶 具 有 养 胃 的 功效 吗 ? < /div> 
"date"> 2016- 4- 2< /div> 






<div class= "row"> 
<div class="title"> 茶 事 起 源 “ 六 朝 以 前 的 茶 事 "< /div> 
<div class="date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class="title"> 红 碎 茶 红 艳 的 颜色 、 鲜 爽 的 香气 和 很 高 的 营养 价值 < /div> 


<div class="date"> 2016- 4- 2< /div> 





</div> 
<div class="row"> 
<div class="title"> 中 国 古代 史料 中 的 茶 字 和 世界 各 国 对 茶 字 的 音译 < /div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 


<div class="row"> 
<div class= "title"> 茶 是 用 来 喝 的 一 杯 陈 年 普洱 味道 < /div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class= "row"> 
<div class="title"> 人 山 无 处 不 飞 浴 , 碧 螺 春 香 百 里 醉 < /div> 
<div class= "date">2016- 4- 2< /div> 
</div> 
<div class= "row"> 
<div class="title"> 洱 茶 越 陈 越 香 的 年 限 是 多 久 ? </div> 
<div class="date"> 2016- 4- 2< /div> 
</div> 
</div> 
<div class= "page"> 
<ahref="">|<</a> 
<ahref=""><<</a> 
<ahref="">1</a> 
<ahref="">2</a> 
<ahref="">>></a> 
<ahref="">>|</a> 
</div> 
</div> 


工作 任务 4 版 面 切 图 





4. 编写 CSS 代码 实现 该 版 位 的 效果 


BS 


oe 2 bE */ 
.article content {width:98% ;margin:5px auto;} 

.article content. row{height: 40px; line- height: 40px; border- bottom: 1px dotted 
#0C007} 

.article content. row. title{height: 40px; float: left; font- size: 13px; margin— 
left:5px;} 

.article content.row.date{font— size:13px;float:right ;margin- right:5px;} 
.page{height:40px;margin:0 auto;float:right;} 

.page a{display:block;height:20px;width:20px;border:1px solid #CCcC;float:left;margin: 
— left: 5px; margin— right: 5px; text- align: center; line — height: 20px; font - size: 12px; 
margin- top:7px;} 


至 此 ,新 闻 动态 列表 页 的 版 面 切 图 完毕 。 
新 闻 动态 列表 页 (article_list. html) 完 整 的 代码 如 下 : 


aouoww nb 


om 


10 


1 
12 
3 
14 
25 
16 
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< !doctype html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title> 无 标题 文档 < /title> 
<link href= "css/style.css" rel="stylesheet" type= "text/css"> 
<link rel="stylesheet" type= "text/css" href="css/jquery.jslides.css" media= "screen" / 
> 
<script type= "text/javascript" src="js/jquery- 1.8.0.min.js"></script> 
<script type= "text/javascript" src="js/jquery.jslides.js"></script> 
< script type=" text/javascript" src="js/jquery. SuperSlide. 2. 1. 1. js" > 
< /script> 
</head> 
<body> 
<!-- 页 头 开始 -一 > 
<div class="top"> 
<div class="center"> 
<div class= "1logo">< img src= "images/logo.png" width= "141" height= "42"> 
< /div> 
<div class= "menu"><a href="index.html"> 网 站 首页 < /a> <a href="about.html"> 关 
于 我 们 </a> < a href =" article _ list. htm"> 新 闻 动 态 </a> < a href= 
"produce list.html"> 产 品 展示 </a> < a href="guestbook.html"> 给 我 留言 </a> 
<a hre 人 "contact.html"> 联 系 我 们 </a></div> 
</div> 
</div> 
<!-- 页 头 结束 --> 
< 上 -焦点 幻灯 开始 --> 
<div id="full- screen- slider"> 
<ul id= "slides"> 
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< 1i style= "background:url ('images/bannerl1.jpg') no- repeat center top"> <a href="" 
target=" blank"> 第 一 张 焦点 幻灯 片 的 标题 < /a>< /1i> 
< 1i style= "background:url ('images/banner?2.jpg') no- repeat center top"> <a href="" 
target=" blank"> 第 二 张 焦点 幻灯 片 的 标题 < /a>< /1i> 
</u> 
</div> 
<!-- 焦 点 幻灯 结束 -> 
<!--main 开 始 --> 
<div class= "main"> 
<!-- 侧 边栏 sidebar- -> 
<div class="slide"> 
<div class= "cat title"> 在 线 客服 < /div> 
<div class= "qq"> 








<div> 客 服 1: < img style= "CURSOR: pointer" onclick= "javascript:window.open 
('http://b.qq.com/webc.htm? new= 0&sid= 382526903&o= http://&q= 7'，' blank 
', "height= 502, width= 644,toolbar= no scrollbars=no,menubar=no, status= no 
');" border="0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt=" 欢 迎 咨 
询 "></div> 
<div> 客 服 2: < img style= "CURSOR: pointer" onclick="javascript:window. 
open ("http://b.qq.com/webc.htm?new= 0&sid= 382526903&o= http://&qr 7 
blank'，'"height= 502, width= 644, toolbar= no, scrollbars= no, menubar= no, 
status=no');" border="0" SRC= http://wpa.qq.com/pa? p=1:382526903:7 
alt=" 欢 迎 咨询 ">< /div> 
</div> 
<div class="service"> 
<span class="title">24 小 时 服务 热线 < /span><br /> 
< span class= "detail"> 0000- 0000000< /span> 
</div> 
<div class= "weixin"> 
<span class="title"> 微 信 公 众 号 <br /> 
< span class= "detail"> dreammy168< /span> 
</div> 
<div class="email"> 
<span class="title"> 电 子 邮 箱 <br /> 
< span class= "detail"> dreammymavy@ 163.com< /span> 
</div> 
</div> 
< 上 -文章 标题 列表 - -> 
<div class= "right"> 
<div class="submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 新 闻 动态 </ 
a></div> 
<div class="article content"> 
<div class= "row"> 
<div class="title"><a hre 伍 "> 茶叶 具有 养 胃 的 功效 吗 ?< /a>< /div> 
<div class= "date">2016- 4- 2< /div> 
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</div> 
<div class="row"> 
<div class="title"> <a href=""> 茶 事 起 源 “ 六 朝 以 前 的 茶 事 ”</a> 
</div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class="title"><a href=-""> 红 碎 茶 红 艳 的 颜色 、 鲜 爽 的 香气 和 很 高 
的 营养 价值 < /a>< /div> 
<div class= "date"> 2016- 4_ 2< /div> 
</div> 
<div class="row"> 
<div class="title"><a href=""> 中 国 古代 史料 中 的 茶 字 和 世界 各 国 对 
茶 字 的 音译 < /a>< /div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class="title"><a href=""> 茶 是 用 来 喝 的 ”一 杯 陈 年 普洱 味道 < /a 
></div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class="title"><a href=""> 入 山 无 处 不 飞 粱 ,碧螺春 香 百 里 醉 </a 
></div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class= "row"> 
<div class="title"><a href=""> 洱 茶 越 陈 越 香 的 年 限 是 多 久 ? </a> 
</div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
</div> 
<div class= "page"> 
<ahref="">|<</a> 
<ahref=""><<</a> 
<a href="">1</a> 
<a href="">2</a> 
<ahref="">>></a> 
<ahref="">>|</a> 


</div> 
</div> 
</div> 
<!--main 结 束 --> 
<!-- 页 尾 开 始 --> 


<div class= "footer"> 
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97 <div class= "center box"> 

98 <div class= "text"> 

99 问 道 茶具 <br /> 

100 电话 : 0000- 0000000 -mail:XXOCCCCXB OO0000XX<br /> 

101 地 址 : wo0 省 W00000KX 市 O000000000X<br /> 

102 技术 支持 : woooooooooocx 科技 有 限 公 司 <br /> 

103 友情 链接 : <a href=""> 中 国 茶叶 网 < /a> gnbsp; snbsp;<a href=""> 茶 文艺 网 
</a> 

104 </div> 

105 <div class="ewm"> 

106 < img src= "images/ewm.png" alt="" /> 

107 </div> 

108 </div> 

109 </div> 


110 <!-- 页 尾 结 束 --> 
111 < /body> 
得 </html> 


4.4.2 “新 闻 动态 ”内 容 页 版 面 切 图 

1. 版 位 分 析 

由 前 面 的 分 析 得 知 新 闻 动 态 内 容 页 的 切 图 也 只 需 完成 该 页 右 侧 * 文 章 内 容 ” 版 位 即 可 。 
该 版 位 的 宽度 为 760px, 高 度 为 360px, 该 版 位 的 盒子 模型 如 图 4-20 所 示 。 








| 文章 标题 








| 文章 来 源 及 发 布 日 期 | 
文章 内 容 


外 层 合子 

















图 4-20 


2. 切 出 (或 导出 ) 该 版 位 图 片 
该 版 位 没有 需要 切 出 (或 导入 ) 的 图 片 。 
.编写 该 版 位 结构 与 内 容 代码 


人 


<!-- 文 章 内 容 --> 
<div class= "right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 新 闻 动态 < /a> 


(Fa 
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wa oa 


10 


-></div> 


<div class="article content"> 
<div class= "title"> 养 生 茶 , 喝 出 男性 健康 < /div> 
<div class= "from"> 来 源 : 本 站 ”发 布 日 期 : 2016- 4- 2< /div> 
<div class="detail"> 
文章 内 容 文章 内 容 文章 内 容 文章 内 容 文章 内 容 文章 内 容 文章 内 容 文章 内 容 文 
章 内 容 文章 内 容 文 章 内 容 文 章 内 容 文章 内 容 文 章 内 容 文 章 内 容 文章 内 容 文章 
内 容 文章 内 容 文章 内 容 文 章 内 容 文章 内 容 文章 内 容 。 


</div> 
</div> 
</div> 


4. 编写 CSS 实现 版 位 的 具体 表现 代码 


4 


5 


1 
2 
3 
4 
5 
6 
入 


wo 
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/* 文章 列表 页 ------------ 


"article content {width:98% ;margin: Spx auto; font— size:13px; line- height:23px;} 
"article content. title {heihgt: 30px; font- size: 14px; font- weight: bold; text- align: 


center; line- height:30px;} 


"article_content. from {height: 30px; line — height: 20px; font- size: 13px; text ~ align: 


center;} 


"article content.detail{line- height:22px;font- size:13px;text- indent:2em;} 
至 此 ,新 闻 动 态 内 容 页 的 版 面 切 图 设计 完毕 。 
新 闻 动 态 内 容 页 (article_show. html) 完 整 的 代码 如 下 。 


< !doctype html> 
<html> 

<head> 

<meta charset= "utf- 8"> 
<title> 无 标题 文档 < /title> 


<link href="css/style.css" rel="stylesheet" type= "text/css"> 


< link rel="stylesheet" type="text/css" href="css/jquery. jslides.css" media= 


"screen" /> 


<script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 


<script type= "text/javascript" src="js/jquery.jslides.js"></script> 


< script type=" text/javascript" src="js/jquery. SuperSlide. 2. 1. 1. js" > 


< /script> 
</head> 
<body> 
<!== 页 头 开始 ==> 
<div class= "top"> 


<div class= "center"> 


< div class= "logo"> < img src= "images/logo.png" width= "141" height= "42"> 


< /div> 


<div class= "menu"><a href=-"index.html"> 网 站 首页 </a><a href= "about.html"> 关 
于 我 们 </a> < a href =" article _ list. html" > 新 闻 动 态 </a> <a href= 


"produce list.html"> 产 品 


示 </a><a href- "guestbock.html"> 给 我 留言 </a> <a href=" 
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contact .html"> 联 系 我 们 < /a>< /div> 
</div> 
</div> 
< 于 -页 头 结束 --> 
< 二 -焦点 幻灯 开始 --> 
<div id="full- screen- slider"> 
<ul id="slides"> 
<1i style= "background:url ('images/banner1.jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 一 张 焦点 幻灯 的 标题 </a>< /1i> 
<1i style= "background:url ("images/banner?2.jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 二 张 焦点 幻灯 的 标题 < /a>< /1i> 
</ul> 
</div> 
< 二 -焦点 幻灯 结束 -- 
<!--about_ main 开始 --> 
<div class= "main"> 
<!-- 侧 边栏 sidebar- -> 
<div class="slide"> 
<div class="cat_title"> 在 线 客服 < /div> 
<div class= "qq"> 
<div> 客 服 1: < img style= "CURSOR: pointer" onclick= "javascript:window.open(' 
http://b.qq.com/webc.htm? new= 0&sid= 382526903&o= http://&q= 7 '， blank' 
height= 502, width= 644, toolbar=no, scrollbars=no,menubar=no, status=no') 
border= "0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt=" 欢 迎 咨询 ">< /div 
> 








<div> 客 服 2: < img style= "CURSOR: pointer" onclick= "javascript:window.open 
('http://b.qq.com/webc.htm? new= 0&sid= 382526903&o= http://&q= 7'，' blank 
', "height= 502, width= 644,toolbar=no, scrollbars=no,menubar=no, status= no 
');" border="0" SRC= http://wpa.qq.com/pa? p=1:382526903:7 alt=" 欢 迎 咨 
询 ">< /div> 
</div> 
<div class= "service"> 
<span class= "title">24 小 时 服务 热线 </span><br /> 
< span class= "detail"> 0000- 0000000< /span> 
</div> 
<div class= "weixin"> 
<span class="title"> 微 信 公 众 号 <br /> 
< span class= "detail"> dreammy168< /span> 
</div> 
<div class= "email"> 
<span class= "title"> 电 子 邮 箱 <br /> 
< span class= "detail"> dreammymavy@ 163.com< /span> 


</div> 
</div> 
<!-- 文 章 内 容 --> 
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4.5 


即 可 


4.5.1 


<div class="right"> 
<div class="submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 新 闻 动态 
</a>-></div> 
<div class= "article content"> 
<div class= "title"> 养 生 茶 , 喝 出 男性 健康 < /div> 
<div class="from"> 来 源 : 本 站 发布 日 期 : 2016- 4- 2< /div> 
<div class="detail"> 


这 里 是 文章 的 详细 内 容 ! 
</div> 
</div> 
</div> 
</div> 
<!--main 结 束 --> 
< 上 -页 尾 开始 --> 


<div class= "footer"> 
<div class= "center box"> 
<div class= "text"> 
问 道 茶具 <br /> 
电话 : 0000- 0000000 ”E-mail:XDOCOCCXB XOOXXXXX<br /> 
地 址 : OX 省 WO0000X 市 000000000CX<br /> 
技术 支持 : X20C0C0COCOCCCX 科技 有 限 公 司 <br /> 
友情 链接 : <a href=""> 中 国 茶叶 网 </a> gnbsp; snbsp;<a href=""> 
茶 文 艺 网 < /a> 
</div> 
<div class="ewm"> 
< img src= "images/ewm.png" alt="" /> 
</div> 
</div> 
</div> 
<!-- 页 尾 结 束 --> 
< /body> 
</html> 


产品 展示 ”版面 切 图 


产品 展示 版 面 主要 由 产品 展示 列表 页 和 产品 展示 内 容 页 组 成 ,通过 分 析 版 面 源 文 件 可 
知 , 它 们 的 “页 头 ” 版 位 “焦点 幻灯 ?版 位 “ 侧 边栏 sidebar” 版 位 和 “页 尾 ” 版 位 与 “关于 我 们 ” 
页 面 的 相同 ,因此 ,产品 展示 列表 页 版 面 的 切 图 内需 完 成 该 版 面 右 侧 * 产 品 图 片 列表 ”版 位 的 
切 图 即 可 , 同 理 ,产品 展示 内 容 页 版 面 的 切 图 也 只 需 完成 该 页 右 侧 “产品 内 容 ” 版 位 切 图 


“产品 展示 ”列表 页 版 面 切 图 


1. 版 位 分 析 
由 前 面 的 分 析 可 知 ,该 版 面 只 需 完成 版 面 右 侧 “产品 图 片 列表 ”版 位 切 图 ,该 版 位 的 宽度 
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是 760px, 高 度 由 版 位 内 容 高 度 决定 ,该 版 位 的 盒子 模型 如 图 4-21 所 示 。 








区 sw | 
































图 4-21 


2. 切 出 (或 导出 ) 该 版 位 图 片 
该 版 位 需要 切 出 的 图 片 为 产品 的 缩 略 图 ,图 片 以 “pro( 序 号 )” 形 式 命名 ,图 片 的 格式 为 


jpg 格式 ,共有 16 张 图 片 需 切 出 或 导出 。 
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3. 编写 结构 与 内 容 代码 


1 <!-- 产 品 展示 -一 > 
2 <div class= "right"> 
3 <div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 产 品 展示 </a 
>-></div> 
4 <div class= "produce content"> 
5 <div class= "pro_box"> <a href="">< img src="images/pro (1) .jpg"> </a> 
</div> 
6 <div class= "pro box"> <a href="">< img src="images/pro(2) .jpg">< /a 
> </div> 
和 <div class= "pro box"><ahref="">< img src="images/pro(3) .jpg"></a></ 
div> 
8 <div class= "pro box"><a href="">< img src= "images/pro(4) .jpg"></a></ 
div> 
9 <div class= "pro box"><ahref="">< img src= "images/pro(5) .jpg"></a></ 
div> 
10 <div class= "pro box"><a href="">< img src= "images/pro(6) .jpg"></a></ 
div> 
11 <div class= "pro box"><a href="">< img src= "images/pro(7) .jpg"></a></ 
div> 
12 <div class="pro_ box"> <a href="">< img src="images/pro (8).jpg"> 
</a></div> 
13 <div class="pro_ box"><a href="">< img src="images/pro (9).jpg"> 


</a></div> 


工作 任务 4 版 面 切 





14 


下 


16 


17 


18 


19 





<div class= "pro box"><a href="">< img src="images/pro(10) .jpg"> </a></ 
div> 
<div class= "pro box"><a href="">< img src="images/pro (11) .jpg"> </a></ 
div> 
<div class= "pro box"><a href=""> < img src="images/pro(12) .jpg"> </a></ 
div> 
<div class= "pro box"><a href="">< img src="images/pro(13) .jpg"> </a></ 
div> 
<div class= "pro box"><a href="">< img src= "images/pro(14) .jpg"> </a></ 
div> 
<div class= "pro box"><a href=""> < img src="images/pro(15) .jpg"> </a></ 
div> 
<div class= "pro box"><a href="">< img src="images/pro(16) .jpg"> </a></ 
div> 
</div> 
<div class= "page"> 
<ahref="">|<</a> 





<a href="">2</a> 
<ahref="">>></a> 


<a href="">>|</a> 
</div> 
</div> 


4. 编写 CSS 实现 版 位 的 具体 表现 


/* 产品 列表 页 ---------------------------------------------- x / 
Produce_content {height :820px;width:760px;} 

Produce_content .pro_box {height:186px;width:181px; float: left;border: lpx solid #CCC; 
margin- left:6px;margin- top:13px;} 


至 此 ,产品 展示 列表 页 版 面 切 图 设计 完毕 。 
产品 展示 列表 页 (produce_list. html) 完 整 代 码 如 下 。 


we om w 


% 


10 


< ldoctype html> 

<html> 

<head> 

<meta charset= "utf- 8"> 

<title> 无 标题 文档 < /title> 

< link href="css/style.css" rel= "stylesheet" type= "text/css"> 

< link rel="stylesheet" type="text/css" href="css/jquery. jslides. css" media= 

"screen" /> 

< script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 

< script type= "text/javascript" src="js/jquery.jslides.js"></script> 
< script type=" text/javascript" src="js/jquery. SuperSlide. 2. 1. 1. js" > 
< /script> 
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36 


37 
38 
39 
40 
41 


</head> 
<body> 


< 上 -页 头 开始 --> 
<div class="top"> 


<div class= "center"> 


< div class= "logo">< img src= "images/logo.png" width= "141" height="42"></ 


div> 
<div class= "menu"><a href="index.html"> 网 站 首页 </a><a href= "about.html"> 关 
于 我 们 </a > < a href =" article list.htm"> 新 闻 动 态 </a> <a href= 
"produce list.html"> 产 品 展示 </a> <a href="guestbook.html"> 给 我 留言 </a> <a href=" 
contact .html"> 联 系 我 们 < /a>< /div> 

</div> 


</div> 


< !-- 页 头 结束 -> 

<!-- 焦 点 幻灯 开始 -一 > 

<div id= "full- screen- slider"> 
<ul id- "slides"> 


二 革 


style= "background:url ('images/bannerl .jpg') no- repeat center top"><a href= 


"" target=" blank"> 第 一 张 焦点 幻灯 的 标题 < /a>< /1i> 


和 


style= "background:url ('images/banner2.jpg') no- repeat center top"><a href= 


"" target=" blank"> 第 二 张 焦点 幻灯 的 标题 < /a>< /1i> 


</ul> 
</div> 


< 上 二 -焦点 幻灯 结束 





<!--about main 开始--> 
<div class= "main"> 
<!-- 侧 边栏 sidebar- -> 
<div class="slide"> 
<div class="cat_title"> 在 线 客服 < /div> 
<div class="gq"> 


<div> 客 服 1: < img style= "CURSOR: pointer" onclick= "javascript:window.open(' 
http://b.qq.com/webc.htm? new= 0&sid= 382526903g0=http://&q=7', '_blank', ' 
height= 502, width= 644, toolbar=no, scrollbars=no,menubar=no, status=no');" 
border= "0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt=" 欢 迎 咨询 ">< /div 
> 
<div> 客 服 2: < img style= "CURSOR: pointer" onclick= "javascript:window.open 
('http://b.qq.com/webc.htm? new= 0&sid= 382526903&o= http://&q= 7'，'_ blank 
', "height= 502, width= 644,toolbar=no, scrollbars=no,menubar=no, status= no 
');" border="0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt=" 欢 迎 咨 
询 "></div> 
</div> 
<div class= "service"> 
<span class= "title">24 小 时 服务 热线 </span><br /> 
<span class= "detail"> 0000- 0000000< /span> 
</div> 
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42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 


54 
55 


56 


57 


58 


59 


60 


61 


63 


64 


65 


66 


67 


68 


69 


70 


<div class: 


<div class= "weixin"> 
<span class="title"> 微 信 公 众 号 <br /> 
< span class="detail"> dreammy168< /span> 
</div> 
<div class="email"> 
<span class="title"> 电 子 邮 箱 <br /> 
< span class="detail"> dreammymavy@ 163.com< /span> 
</div> 
</div> 
< 上 -产品 展示 --> 


<div class= "right"> 





submenu"> <a href=“index.php”> 首 页 </a>-><a href=""> 产 品 展示 </ 


a>-></div> 


<div class= "produce_content"> 
<div class="pro box"><a href="">< img src="images/pro (1) .jpg"> </a></ 
div> 
<div class= "pro box"><a href="">< img src= "images/pro(2) .jpg"></a></ 
div> 
<div class="pro box"><a href="">< img src="images/pro (3) .jpg"> </a></ 
div> 
<div class="pro box"><a href="">< img src="images/pro (4) .jpg"> </a></ 
div> 
<div class="pro box"><a href="">< img src= "images/pro(5) .jpg"></a></ 
div> 
<div class="pro box"><a href="">< img src="images/pro(6).jpg"></a></ 
div> 
<div class="pro box"><a href="">< img src= "images/pro(7) .jpg"></a></ 
div> 
<div class="pro box"><a href="">< img src= "images/pro(8) .jpg"></a></ 
div> 
<div class="pro box"><a href="">< img src="images/pro(9) .jpg"></a></ 
div> 
<div class="pro box"><a href="">< img src= "images/pro (10) .jpg"> </a></ 
div> 
<div class="pro box"><a href="">< img src="images/pro(11).jpg"> </a></ 
div> 
<div class="pro_box"><a href="">< img src="images/pro (12). jpg"> 
</a></div> 
<div class="pro_box"><a href=""> < img src="images/pro (13).jpg"> 
</a></div> 
<div class="pro_ box"><a href="">< img src="images/pro (14). jpg"> 
</a></div> 
<div class="pro_ box"><a href="">< img src="images/pro (15). jpg"> 
</a></div> 
<div class="pro_ box"><a href="">< img src="images/pro (16).jpg"> 
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</a></div> 
71 </div> 
72 <div class= "page"> 
3 <ahref="">|<</a> 
74 <ahref=""><<</a> 
75 <ahref="">1</a> 
76 <a href="">2< /a> 
77 <ahref="">>></a> 
78 <a href="">> |</a> 
79 </div> 
80 </div> 
81 </div> 
82 <!--main 结 束 --> 
83 <!-- 页 尾 开 始 --> 
84 <div class= "footer"> 
85 <div class= "center box"> 
86 <div class= "text"> 
87 问 道 茶具 <br /> 
88 电话 : 0000- 0000000 E-mail:XXXXXXX@ XXXXXXXXX<br /> 
89 地 址 : ZX 省 X00000X 市 X20CCCCCCCCCCX<br /> 
90 技术 支持 : xxxxxxxxxxxxxx 科技 有 限 公司 <br /> 
91 友情 链接 : <a href=""> 中 国 茶叶 网 < /a> snbsp; gnbsp;<a href=""> 茶 文艺 网 < 
/a> 
92 </div> 
3 <div class= "ewm"> 
94 < img src= "images/ewm.png" alt="" /> 
95 </div> 
96 </div> 
97 </div> 
98 ”<!-- 页 尾 结束 --> 
99 < /body> 
100 </htm> 
4.5.2 “产品 展示 ”内 容 页 版 面 切 图 
1. 版 位 分 析 


由 版 面 的 源 文件 可 知 , 该 版 位 的 盒子 模型 如 图 4-22 所 示 。 

2. 切 出 (或 导出 ) 该 版 位 图 片 

该 版 位 需 切 出 (或 导出 ) 的 图 片 有 两 张 ,一 张 是 产品 参数 图 片 ,保存 为 pro_d. jpg; 另 一 张 
是 产品 特点 图 版 ,保存 为 pro_s. jpg。 其 实 这 两 张 图 片 及 文本 内 空 并 不 是 必须 导出 的 ,因为 
网 站 开发 出 来 后 ,产品 的 具体 内 容 是 由 网 站 后 台 的 编辑 器 编辑 发 布 的 。 

3. 编写 结构 与 内 容 代码 


1 <!-- 产 品 内 容 --> 
4 <div class="right"> 
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7 
8 
Ep 

















| 产品 标题 | 








产品 详细 内 容 











外 层 盒子 


图 4-22 


<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 产 品 展示 < /a>- 
></div> 
<div class= "produce show content"> 
<div class= "title"> 问 道 紫砂 茶具 < /div> 
<div class= "detail"> 
<jmg src= ”images/pro d 1.jpg"><br /> 
<jmg src= ”images/pro d 2.jpg"><br /> 
< img src= ”images/pro d 3.jpg"> 
</div> 
</div> 
</div> 


铺 注意; 上 述 代 码 第 6 一 7 行 之 间 的 代码 和 内 容 , 后 期 主要 来 自 于 数据 库 。 
4. 编写 CSS 实现 版 位 的 具体 表现 


[3 


4 


/* 产品 内 容 页 -一 
:Produce_show_content {width:760px;} 
.Produce_show_content. title {height: height: 37px; line- height: 37px; text— 





大 


align: center; font- size: 14px; font- weight: bold; background: # 66973C; color: 
# FFF;} 
:Produce_ show content .detail{line- height:22px;font- size:13px;} 


至 此 ,产品 展示 内 容 页 版 面 切 图 设计 完 
产品 展示 内 容 页 (produce_show. html) 完 整 代 码 如 下 。 


ES 
区 
3 
2 
5 
6 


< !doctype html> 
<html> 

<head> 

<meta charset= "utf- 8"> 

<title> 无 标题 文档 < /title> 

< link href= "css/style.css" rel="stylesheet" type= "text/css"> 
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36 


< link rel="stylesheet" type= "text/css" href="css/jquery.jslides.css" media= "screen" 
> 
< script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 
< script type= "text/javascript" src="js/jquery.jslides.js"></script> 
< script type=" text/javascript" src="js/jquery. Superslide. 2. 1. 1. js" > 
< /script> 
</head> 
<body> 
< 上 -页 头 开始 --> 
<div class="top"> 
<div class= "center"> 
<div class= "lo0go"> < img src= "images/logo.png" width= "141" height= "42"></ 
div> 
<div class= "menu"><a href="index.html"> 网 站 首页 </a><a href="about.html"> 关 
于 我 们 </a > < a href ="article_list. htm"> 新 闻 动 态 </a> < a href= 
"produce 1ist.html"> 产 品 展示 < /a><a href="guestbook.html"> 给 我 留言 </a> <a href=" 
contact.html"> 联 系 我 们 < /a>< /div> 
</div> 
</div> 
<!-- 页 头 结束 --> 
<!-- 焦 点 幻灯 开始 -一 > 
<div id="full- screen- slider"> 
<ul id="slides"> 
<1i style= "background:url ('images/bannerl .jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 一 张 焦点 幻灯 的 标题 </a>< /1i> 
<1i style= "background:url ('images/banner2.jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 二 张 焦点 幻灯 的 标题 < /a>< /1i> 
</ul> 
</div> 
< 二 -焦点 幻灯 结束 --> 
<!--about main 开始--> 
<div class= "main"> 
<!-- 侧 边栏 sidebar- -> 
<div class="slide"> 
<div class="cat_title"> 在 线 客服 < /div> 
<div class= "qq"> 
< div> 客 服 1: < img style= "CURSOR: pointer" onclick= "javascript:window. 
open('http://b.qq.com/webc.htm? new= 0&sid= 382526903&o= http://&q= 7'，' 
blank'，'height= 502, width= 644, toolbar= no, scrollbars= no, menubar= no, 
status= no');"border= "0" SRC= http: //wpa.qq. com/pa? p=1:382526903:7 alt 
=" 欢 迎 咨询 ">< /div> 
<div> 客 服 2: < img style= "CURSOR: pointer" onclick= "javascript:window.open("' 
http://b.qq.cam/webc.htm? new= 0&sid= 382526903&o= http://&q= 7'，'_ blank'，， 
height= 502, width= 644, toolbar= no, scrollbars=no, menubar= nov status=n0');" 
border= "0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt=" 欢 迎 咨询 ">< /div 
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37 
38 
3 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 


54 
55 
56 
Ez 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
nn 
72 
73 
74 
75 
76 
77 
78 
3 


2 
</div> 
<div class="service"> 
<span class= "title">24 小 时 服务 热线 < /span><br /> 
< span class="detail"> 0000- 0000000< /span> 
</div> 
<div class= "weixin"> 
<span class="title"> 微 信 公 众 号 <br /> 
< span class="detail"> dreammy168< /span> 
</div> 
<div class="email"> 
<span class="title"> 电 子 邮 箱 <br /> 
< span class= "detail"> drearmmymavy@ 163.com< /span> 


</div> 
</div> 
<!-- 产 品 内 容 --> 


<div class="right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 产 品 展示 </ 
a>-></div> 
<div class="produce show content"> 
<div class= "title"> 养 生 茶 , 喝 出 男性 健康 < /div> 
<div class= "detail"> 
< img src=” images/pro d 1.jpg"><br /> 
< img src=” images/pro d 2.jpg"><br /> 
< img src=” images/pro d 3.jpg"> 


</div> 
</div> 
</div> 
</div> 
<!--main 结 束 --> 
< 上 -页 尾 开 始 --> 


<div class="footer"> 
<div class= "center box"> 
<div class= "text"> 
问 道 茶具 <br /> 
电话 : 0000-0000000 E-mail:XXXXXXX@ XXXXXXXXX<br /> 
地 址 : XXXXX 省 XXXXXXXX 市 XXXXXXXXXXXXX<br /> 
技术 支持 : X000000000CCXX 科 技 有 限 公 司 <br /> 
友情 链接 : <a href=""> 中 国 茶 叶 网 < /a> snbsp; snbsp;<a href=""> 茶 文艺 网 < /a> 
</div> 
<div class="ewm"> 
< img src= "images/ewm.png" alt="" /> 
</div> 
</div> 
</div> 
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80 <!-- 页 尾 结束 --> 
81 </body> 
82 ”</htm> 


46 “给 我 留言 " 版 面 切 图 


1. 版 位 分 析 

通过 分 析 版 面 源 文件 ,给 我 留言 版 面 的 “页 头 ? 版 位 “焦点 幻灯 ?版 位 “ 侧 边 栏 sidebar” 
版 位 和 ”页 尾 ?版 位 与 “关于 我 们 ?页 面 的 相同 ,因此 ,给 我 留言 版 面 的 切 图 只 需 完 成 该 版 面 右 
侧 * 留 言 填写 区 ”版 位 的 切 图 即 可 ,该 版 位 的 宽度 为 760px, 最 小 的 高 度 为 360px, 该 版 位 的 
盒子 模型 如 图 4-23 所 示 。 


页 内 导 般 








留言 填写 区 








外 屋 盒子 














图 4-23 


2. 切 出 (或 导出 ) 该 版 位 图 片 
该 版 位 要 导出 的 图 片 只 有 一 张 , 即 “提交 ”按钮 ,导出 类 型 为 png, 保 存 为 submit. png。 
. 编写 结构 与 内 容 代码 
<div class= "right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a> -><a href=“guestbook.php”> 给 
我 留言 </a>< /div> 
<div class= "guestbook content"> 


NB wm 


< form name= "forml" id= "forml" action="" method= "post"> 
<ul> 


3 

4 

号 

6 <1i class= "title"><span class= "must"> * </span> 标 题 : </1i> 
7 <1li><input name= "title" type= "text" id="title"></li> 

8 </Vul> 

9 <ul> 

10 <1i class="title">< span class= "must"> * </span> 称 呼 : < /1i> 
辣 <1i><input name= "name" type= "text" id= "name">< /li> 

12 </ul> 
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<ul> 
<1i class= "titlen> 手 机 : </1i> 
<1i><input name= "tel" type= "text" id- "tel"></1i> 
</u> 
<ul> 
<1i class="title">QQ: </1i> 
<1i><input name= "qq" type= "text" id- "qq"></1i> 
</ul> 
<ul> 
<1i class="title">< span class= "must"> * </span> 邮 箱 : </1i> 
<1i><input name= "email" type= "text" id="email"></li> 
</ul> 


<ul class="ct"> 
<1i class="title">< span class="must"> * </span> 内 容 : </1i> 
<1i> 
< textarea name= "content" cols="60" rows="5" id="content"> 
</textarea> 
</1i> 
</ul> 
<div> 
< input type= "image" src= "images/submit.png"> 
</div> 
</form> 
</div> 
</div> 


4. 编写 CSS 实现 版 位 的 具体 表现 代码 


:guestbook_content {margin- top:10px;width:760px;} 
.guestbook_content ul {height:40px;font- size:13px;} 

.guestbook content ul li{height:40px;line- height:40px;float:left;} 
.guestbook_ content ul li.title{width:150px;text- align:right;} 
.guestbook_content ul li.title.must{color:red;}; 

.guestbook_ content ul.ct{height:100px;border:1px solid red;} 
.guestbook content ul.ct.title{height:100px;line- height:100px;} 
.guestbook_content ul.ct textarea{margin- top:10px;} 
.guestbook_content ul 1i input {height:22px;width:250px;} 
-guestbook content div{clear:both;} 

.guestbook content div input {margin- left:250px;} 


至 此 ,给 我 留言 版 面 切 图 设计 完毕 。 
给 我 留言 页 (guestbook. html) 完 整 代码 如 下 。 


入 


< !doctype html> 
<html> 
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<head> 
<meta charset= "utf- 8"> 
<title> 无 标题 文档 < /title> 
< link href- "css/style.css" rel="stylesheet" type= "text/css"> 
< link rel= "stylesheet" type= "text/css" href= "css/jquery.jslides.css" media= "screen" 
/> 
< script type= "text/javascript" src="js/jquery- 1.8.0.min.js">< /script> 
< script type= "text/javascript" src="js/jquery.jslides.js">< /script> 
< script type=" text/javascript" src="js/jquery. SuperSlide. 2.1.1.js"> 
< /script> 
</head> 
<body> 
< 上 -页 头 开始 --> 
<div class= "top"> 
<div class= "center"> 
<div class= "logo"> < img src= "images/logo.png" width= "141" height= "42"></ 
div> 
<div class= "menu"><a href="index.html"> 网 站 首页 </a><a href="about.html"> 关 
于 我 们 </a > < a href =" article _list. htm"> 新 闻 动 态 </a> <a href= 
"produce 1ist.html"> 产 品 展示 < /a><a href="guestbook.html"> 给 我 留言 </a> <a href=" 
contact .html"> 联 系 我 们 < /a>< /div> 
</div> 
</div> 
<!-- 页 头 结束 -一 > 
<!-- 焦 点 幻灯 开始 -一 > 
<div id="full- screen- slider"> 
<ul id= "slides"> 
<1i style= "background:url ('images/banner1.jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 一 张 焦点 幻灯 的 标题 < /a>< /1i> 
<1i style= "background:url ('images/banner2.jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 二 张 焦点 幻灯 的 标题 < /a>< /1i> 
</ul> 
</div> 
< !-- 焦 点 幻灯 结束 --> 
<!--about _ main 开始 --> 
<div class= "main"> 
<!-- 侧 边栏 sidebar- -> 
<div class="slide"> 
at_title"> 在 线 客服 < /div> 
<div class= "qq"> 





<div> 客 服 1: < img style= "CURSOR: pointer" onclick= "javascript:window.open 

('http://b.qq.com/webc.htm? new= 0&sid= 382526903£0=http://gq=7', '_blank 
', "height=502, width= 644,toolbar=no, scrollbars=no,menubar=no, status= no 
');" border="0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt=" 欢 迎 咨询 " 
></div> 
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<div> 客 服 2: < img style="CURSOR: pointer" onclick="javascript:window. 

open('http://b.qq.com/webc.htm? new- 0gsid- 382526903go-http://gq-7', 

blank', 'height= 502, width= 644, toolbar= no, scrollbars=no, menubar= no, 

" border="0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt 
=" 欢 迎 咨询 ">< /div> 

</div> 


status=no' 





<div class="service"> 
<span class= "title">24 小 时 服务 热线 < /span><br /> 
< span class= "detail"> 0000- 0000000< /span> 
</div> 
<div class= "weixin"> 
<span class= "title"> 微 信 公众 号 <br /> 
<span class= "detail"> dreammy168< /span> 
</div> 
<div class= "email"> 
<span class= "title"> 电 子 邮箱 <br /> 
<span class= "detailw> dreammymavye 163.com< /span> 
</div> 
</div> 
< !-- 给 我 留言 --> 
<div class= "right"> 
"submenu"> <a href= “index.php”> 首 页 </a>-><a href=“guestbook.php” 
> 给 我 留言 </a>< /div> 
<div class= "guestbook_content"> 
< form name= "forml"” id= "forml" action="" method= "post"> 
<ul> 
<1i class= "title"><span class= "must"> * </span> 标 题 : </1i> 
<1i><input name= "title" type= "text" id="title"></li> 
</ul> 
<ul> 








<div clas 


<1i class="title">< span class= "must"> * </span> 称 呼 : < /1i> 
<1i><input name= "name" type= "text" id= "name">< /1i> 
</ul> 
<ul> 
<1i class= "title"> 手 机 : </1i> 
<1i><input name= "tel" type= "text" id= "tel"></li> 
</ul> 
<ul> 
<1i class="title">QQ: </1i> 
<1i><input name= "qq" type= "text" id= "qq"></1i> 
</ul> 
<ul> 
<1i class="title"><span class= "must"> * </span> 邮 箱 : </1i> 
<1i><input name= "email" type= "text" id- "email"></li> 
</ul> 
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<ul class= "ct"> 
<1i class= "title"><span class= "must"> * </span> 内 容 : </1i> 
<1i> 
< textarea name="content" cols="60" rows="5" id="content"> 
< /textarea> 
</1i> 
</ul> 
<div> 


< input type= "image" src="images/submit .png"> 


</div> 
</form> 
</div> 
</div> 
</div> 
<!--main 结 束 --> 
< 上 -页 尾 开 始 --> 


<div class= "footer"> 
<div class= "center box"> 
<div class= "text"> 
问 道 茶 具 <br /> 
电话 : 0000- 0000000 E-mail :XXXXXXX@ XXXXXXXXX<br /> 
地 址 : Woo 省 X20C0COC 市 0000000000C0X<br /> 
技术 支持 : Xoo0c0000000X 科技 有 限 公 司 <br /> 
友情 链接 : <a href=""> 中 国 茶叶 网 < /a> snbsp; gnbsp;<a href="> 茶 文艺 网 
</a> 
</div> 
<div class="ewm"> 
< img src= "images/ewm.png" alt="" /> 
</div> 
</div> 
</div> 
<!-- 页 尾 结 束 - -> 
< /body> 
</htm> 


“联系 我 们 " 版 面 切 图 


通过 分 析 版 面 源 文件 .“ 联 系 我们 ”版 面 的 “页 头 ” 版 位 “焦点 幻灯 ”版 位 “ 侧 边 栏 
sidebar” 版 位 和 “页 尾 ” 版 位 与 “关于 我 们 ”页 面 的 相同 ,因此 ,“ 联 系 我 们 ”版 面 的 切 图 只 需 完 
成 该 版 面 右 侧 “ 联 系 我 们 ”内 容 版 位 的 切 图 即 可 。 

1. 版 位 分 析 

该 版 位 的 宽度 为 760px, 最 小 的 高 度 为 360px, 该 版 位 的 盒子 模型 如 图 4-24 所 示 。 
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点 系 我 们 内 容 








外 层 合子 


图 4-24 


2. 切 出 (或 导出 ) 该 版 位 图 片 

该 版 位 需 切 出 (或 导出 ) 的 图 片 共有 两 张 ,一 张 是 内 容 区 顶部 图 片 (导出 为 contact 
.jpg) , 另 一 张 为 内 容 区 底部 的 地 图 (导出 为 map. jpg) 。 

3. 编写 结构 与 内 容 代码 


< ! 一 联系 我 们 内 容 --> 

<div class= "right"> 

<div class= "submenu"> <a href=“index.php”> 首 页 </a>-><ahref=""> 联 系 我 们 < /a 
> </div> 


w Nb PP 


<div class= "about_content"> 


4 
号 这 里 是 联系 我 们 内 容 。 
6 </div> 

b </div> 


4. 编写 CSS 实现 版 位 的 具体 表现 代码 


和 */ 
2 :contact_content {width:760px;} 
3 。 Contact __ content. contact img {height: 242px; text - align: center; margin - 


bottom: 10px; } 
4 :Contact_content .detail {line- height:24px;font- size:14px;padding- left:10px;} 


至 此 ,联系 我 们 版 面 切 图 设计 完 
“联系 我 们 ”页 面 (contact. html) 完 整 的 代码 如 下 : 


< !doctype html> 

<html> 

<head> 

<meta charset= "utf- 8"> 

<title> 无 标题 文档 < /title> 

< link href= "css/style.css" rel="stylesheet" type= "text/css"> 


ao mw nb 
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< link rel="stylesheet" type=" text/css" href="css/jquery. jslides. css" media= 
"screen" /> 
< script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 
< script type= "text/javascript" src="js/jquery.jslides.js">< /script> 
< script type=" text/javascript" src="js/jquery. SuperSlide. 2.1.1.js"> 
< /script> 
</head> 
<body> 
<!-- 页 头 开始 --> 
<div class= "top"> 
<div class= "center"> 
<div class= "logon>< img src= "images/logo.png" width= "141" height= "42"></ 
div> 
< div class="menu"> < a href="index.html"> 网 站 首页 </a> < a href="about 
.html"> 关 于 我 们 </a> < a href="article_list.html"> 新 闻 动 态 </a><a href= 
"produce list.html"> 产 品 展示 </a> <a href= "guestbook.html"> 给 我 留言 </a> <a href 
="contact.html"> 联 系 我 们 < /a>< /div> 
</div> 
</div> 
<!-- 页 头 结束 --> 
<!-- 焦 点 幻灯 开始 -一 > 
<div id="full- screen- slider"> 
<ul id="slides"> 
<1i style= "background:url ('images/bannerl .jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 一 张 焦点 幻灯 的 标题 </a>< /1i> 
<1i style= "background:url ('images/banner2.jpg') no- repeat center top"><a href= 
"" target=" blank"> 第 二 张 焦点 幻灯 的 标题 < /a>< /1i> 
</ul> 
</div> 
<!-- 焦 点 幻灯 结束 --> 
<!--about main 开始 --> 
<div class= "main"> 
<!-- 侧 边栏 sidebar- -> 
<div class= "slide"> 
<div class="cat title"> 在 线 客服 < /div> 
<div class= "qq"> 
<div> 客 服 1: < img style= "CURSOR: pointer" onclick= "javascript:window.open 
('http://b.qq.com/webc.htm? new= 0&sid= 382526903&o= http://&q=- 7'，' blank 
', "height= 502, width= 644,toolbar=no, scrollbars=no, menubar=no, status= no 
') ;"border="0" SRC=http://wpa.qq.com/pa? p=1:382526903:7 alt= "欢迎 咨询 " 
></div> 
<div> 客 服 2: < img style= "CURSOR: pointer" onclick= "javascript:window. 
open('http://b.gqq.com/webc.htm? new=0&sid=382526903go=http://&q=7','_ 
blank', 'height= 502, width= 644, toolbar= no, scrollbars= no, menubar= no, 
status=no');"border="0" SRC=http://wpa.qq-.com/pa? p=1:382526903:7 alt 
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=" 欢 迎 咨询 ">< /div> 
</div> 
<div class="service 
<span class="title">24 小 时 服务 热线 < /span><br /> 
< span class= "detail"> 0000- 0000000< /span> 
</div> 





<div class= "weixin"> 
<span class="title"> 微 信 公 众 号 <br /> 
< span class="detail"> dreammy168< /span> 
</div> 
<div class="email"> 
<span class="title"> 电 子 邮 箱 <br /> 
< span class= "detail"> drearmmymavy@ 163.com< /span> 


</div> 
</div> 
< !-- 联 系 我 们 --> 


<div class= "right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 联 系 我 们 </ 
a></div> 
<div class= "contact content"> 
<div class= "contact img">< img src="images/contact.jpg">< /div> 
<div class="detail"> 
<strong> 公 司 名 称 : < /strong> 广 东 问 道 茶具 <br /> 
<strong> 公 司 地 址 : < /strong> 广 东 省 惠州 市 惠 城区 <br /> 
<strong> 联 系 人 : </strong> 张 丰 <br /> 
<strong> 联 系 电话 : </strong> 00000000000<br /> 
<strong> 手 机 : < /strong> 00000000000<br /> 
<strong> 电 子 邮箱 : < /strong> dreammymavy@ 163.com<br /> 
<strong> 微 信 : < /strong> dreammy168<br /><br /> 
<img src= "images/map.jpg" width= "697" height= "284"> 


</div> 
</div> 
</div> 
</div> 
<!--main 结 束 --> 
<!-- 页 尾 开 始 --> 


<div class="footer"> 


<div class= "center box"> 
<div class="text"> 
问 道 茶具 <br /> 
电话 : 0000- 0000000 E-mail:X0000X@ WOOOOCXXX<br /> 
地 址 : XXXXX 省 XXXXXXXX 市 200CCCCCCCCCX< br /> 
技术 支持 : wooo0oo0000000X 科技 有 限 公司 <br /> 
友情 链接 : <a href=""> 中 国 茶 叶 网 < /a> gnbsp; snbsp;<a href=""> 茶 文艺 网 


</a> 
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79 </div> 

80 <div class="ewm"> 

81 < img src= "images/ewm-png" alt="" /> 
82 </div> 

83 </div> 


84 </div> 
85 ”<!-- 页 尾 结 束 --> 
86 </body> 
87 </html> 


在 上 述 第 57 一 64 行 代码 和 内 容 , 网 站 完成 后 是 从 数据 库 里 输出 ,因此 该 位 置 也 可 以 用 


“联系 我 们 内 容 " 或 “XXXXX” 代 替 。 
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(人 :pe 目标 


。 能 够 使 用 E-R 方法 分 析 系 统 的 概念 模型 。 

能 够 根据 系统 业务 逻辑 分 析 系 统 的 歼 据 逻辑 结构 

。 能 够 根据 系统 数据 远 辑 结构 设计 数据 表 并 在 数据 库 服务 器 上 实施 。 
。 培养 学 生 良好 的 逻辑 思维 能 力 。 


SS 知识 目标 
。 了解 E-R 图 的 定义 和 E-R 方法 。 
。 熟悉 E-R 图 的 构成 要 素 。 
。 掌握 数据 逻辑 模型 知识 及 E-R 图 的 作 图 方法 。 
。 掌握 数据 表 设计 和 如 何在 MySQL 数据 库 服务 器 上 实施 。 
jr 
人 三 任务 描述 
本 工作 任务 主要 根据 用 户 的 功能 需求 ,采用 E-R 方法 分 析 网 站 数据 逻辑 结构 并 形成 数 
据 表 ,最 后 在 MySQL 数据 库 服务 器 上 实施 。 





5.1 数据 库 的 ER 分 析 


1. 确定 网 站 数据 实体 集合 

该 网 站 的 用 户 类 型 有 两 类 .一 类 是 广大 的 访问 者 , 另 一 类 是 网 站 管理 人 员 。 访 问 者 可 以 
浏览 “关于 我 们 ”信息 “新 闻 动 态 ” 人 信息“ 产品 "信息 “联系 我 们 ”信息 ,可 以 通过 留言 栏 留 
言 ,可 以 通过 QQ 在 线 客服 进行 咨询 ;管理 员 可 以 通过 网 站 的 入 口 进 入 网 站 的 后 台 , 能 够 对 
网 站 的 信息 进行 管理 , 它 包括 设置 网 站 配置 信息 、 管 理 员 信息 管理 . 单 页 面 信息 管理 (“ 关 于 
我 们 ”和 “联系 我 们 ”) ,文章 信息 管理 ( 即 新 闻 动 态 ) .产品 信息 管理 、 焦 点 幻灯 管理 .QQ 客服 
管理 .友情 链接 管理 。 

由 以 上 分 析 得 知 , 该 系统 的 数据 实体 有 : 访问 者 、 网 站 管理 员 、 网 站 基本 配置 .焦点 
幻灯 、 单 页 信息 、 文 章 信息 (新 闻 动 态 )、 产 品 信息 、 留 言 信 息 、QQ 客服 信息 、 友 情 链 接 
信息 。 
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2. 数据 实体 属性 分 析 

(1) 访问 者 实体 属性 分 析 

广大 的 访问 者 无 须 注 册 用 户 或 会 员 , 只 需 连 入 互联 网 便 可 访问 网 站 前 台 页 面 的 内 容 , 因 
此 ,该 实体 不 需要 在 数据 库 中 体现 。 

(2) 网 站 基本 配置 实体 属性 分 析 

通过 分 析 , 网 站 基本 配置 包括 的 属性 如 图 5-1 所 示 。 



















网 站 基本 配置 i 


公司 地 址 





5-1 


(3) 网 站 管理 员 实 体 属性 分 析 
通过 分 析 , 网 站 管理 员 具 有 的 属性 如 图 5-2 所 示 。 








CC 记录 id 网 站 基本 配置 | 一 《管理 员 密 码 》 


5-2 


(4) 焦点 幻灯 实体 属性 分 析 
通过 分 析 , 焦 点 幻灯 具有 的 属性 如 图 5-3 所 示 。 












CC 记录 d | 焦点 | 一 CC 排序 d > 


图 5-3 
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(5) 单 页 信息 实体 属性 分 析 
通过 分 析 , 焦 点 幻灯 具有 的 属性 如 图 5-4 所 示 。 


CE 
MO | Ca 
CD 


单 页 标题 
Ca | Cn 


5-4 











(6) 文章 (新 闻 动 态 ) 实 体 属性 分 析 
通过 分 析 , 文 章 具有 的 属性 如 图 5-5 所 示 。 






CC 记录 id 

















(7) 产品 信息 实体 属性 分 析 
通过 分 析 ,产品 信息 具有 的 属性 如 图 5-6 所 示 。 


i 










| 
CC 记录 d > 产品 信息 是 否 推荐 产品 














(8) 留言 信息 实体 属性 分 析 

通过 分 析 , 留 言 信息 具有 的 属性 如 图 5-7 所 示 。 
(9) QQ 客服 信息 实体 属性 分 析 

通过 分 析 ,QQ 客服 信息 具有 的 属性 如 图 5-8 所 示 。 
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标题 


(ER 》 一 | QQ 客服 信息 


5-8 








客服 姓名 





(10) 友情 链接 信息 实体 属性 分 析 
通过 分 析 , 友 情 链接 具有 的 属性 如 图 5-9 所 示 。 


标题 





CC 记录 d > | 友情 链接 信息 





链接 地 址 
5-9 


52 形成 数据 巡 辑 模型 


通过 5.1 节 的 E-R 图 分 析 , 进 一 步 形成 数据 逻辑 模型 如 下 : 

(1) 网 站 基本 配置 (记录 id, 网 站 标题 ,网 站 网 址 ,网 站 Logo, 网 站 关键 字 , 网 站 描述 ,网 
站 版 权 信息 ,公司 名 称 , 公 司 联系 电话 ,公司 传真 ,公司 邮箱 ,公司 微 信 ,公司 二 维 码 ,公司 
地 址 ); 





(2) 网 站 管理 员 ( 记 录 id, 管 理 员 账 号 .管理 员 密 码 ); 
(3) 焦点 幻灯 (记录 id, 幻 灯 标题 ,幻灯 缩 略 图 ,链接 地 址 ,排序 id) ; 





(4) 单 页 信 
(5) 文章 信 
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录 id, 单 页 标题 ,来 源 ,发 布 日 期 ,关键 字 , 描 述 ,内 容 ); 
息 ( 记 录 id ,文章 标 题 ,来 源 , 发 布 日 期 ,关键 字 , 描 述 , 文 章 内 容 , 是 否 推荐 
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文章 ) 

(6) 产品 信息 (记录 id, 产 品 标题 ,来 源 , 发 布 日 期 , 缩 略图 ,关键 字 , 描 述 ,产品 内 容 , 是 
否 推 荐 产品 ); 

(7) 留言 信息 (记录 id, 留 言 标题 ,留言 日 期 ,留言 人 ,手机 号 码 , QQ 号 码 , 电 子 邮 箱 , 留 
言 内 容 ,是否 处 理 ); 


(8) QQ 客服 信息 (记录 id, 标 题 ,QQ 号 码 , 客 服 姓名 ); 
(9) 友情 链接 信息 (记录 id, 标 题 ,链接 地 址 ) 。 





53 设计 数据 表 


根据 5. 2 节 数 据 库 数据 逻辑 模型 ,进一步 设计 形成 数据 表 。 
网 站 基本 配置 信息 表 config 见 表 5-1。 



























































表 5-1 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
id int(11) 否 是 | 否 | 是 | 是 | 记录 id 
site_title varchar(50) 是 否 否 否 否 网 站 标题 
site_url varchar(50) 是 否 否 否 否 网 站 地 址 
site_logo varchar(100) 是 否 否 否 否 网 站 Logo 
site_keywords text 是 否 否 否 否 网 站 关键 字 
site_description text 是 否 否 否 否 网 站 描述 
site_copyright varchar(100) 是 否 伍 | 香 者 网 站 版 权 
company_name varchar(50) 是 否 否 否 否 公司 名 称 
company_phone varchar(20) 是 否 否 否 否 公司 联系 电话 
company_fax varchar(20) 是 否 否 否 否 公司 传真 
company_email varchar(30) 是 否 否 否 否 公司 邮箱 
company_weixin varchar(30) 是 否 否 否 否 公司 微 信 
company_ewm varchar(100) 是 否 否 否 否 公司 二 维 码 
company_address varchar(50) 是 否 否 否 否 公司 地 址 
管理 员 信 息 表 admin 见 表 5-2。 
表 5-2 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 

id int(11) 否 是 | 否 | 是 | 是 | 记录 id 

admin_name varchar(50) 是 否 否 是 否 管理 员 账 号 

admin_pass varchar(50) 是 否 否 否 春 管理 员 密码 


























焦点 幻灯 信息 表 slide 见 表 5-3。 
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表 5-3 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
id int(11) 否 是 | 否 | 是 | 是 | 记录 id 
title varchar(100) 是 否 理 否 否 幻灯 标题 
thumbnail varchar(255) 是 否 否 否 否 缩 略 图 
link varchar(100) 是 否 否 否 否 链接 地 址 
order int(11) 是 否 | 否 | 否 | 否 | 排序 id 
单 页 信息 表 single 见 表 5-4。 
表 5-4 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
id int(11) 否 是 | 否 | 是 | 是 | 记录 id 
title varchar(50) 是 否 否 否 否 单 页 标题 
comefrom varchar(20) 是 否 否 否 否 来 源 
pubdate varchar(20) 是 否 否 否 否 发 布 日 期 
keywords text 是 否 否 否 否 关键 字 
description text 是 否 否 否 否 描述 
content text 是 背 否 否 否 单 页 内 容 
文章 信息 表 article 见 表 5-5。 
表 55 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
id int(11) 否 是 | 否 | 是 | 是 | 记录 id 
title varchar(50) 是 否 过 .| 者 否 文章 标题 
comefrom varchar(20) 是 否 可 5 泗 否 来 源 
pubdate varchar(20) 是 否 否 否 否 发 布 日 期 
keywords text 是 否 否 否 否 关键 字 
description text 是 否 否 | 否 否 | 描述 
content text 是 否 否 否 否 文章 内 容 
posid varchar(10) 是 否 | 否 | 否 | 否 | 是 否 推荐 文章 
产品 信息 表 produce 见 表 5-6。 
表 5-6 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
id int(11) 否 是 | 否 | 是 | 是 | 记录 id 
title varchar(50) 是 否 | 否 | 否 | 否 | 文章 标题 
comefrom varchar(20) 是 否 | 否 | 否 | 否 | 来 源 
pubdate varchar(20) 是 否 | 否 | 否 | 否 | 发布 日 期 
thumbnail varchar(100) 是 否 | 否 | 否 | 否 | 产品 缩 略图 
keywords text 是 天 :| 堆 | 香 否 | 关键 字 
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续 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
description text 是 理 否 否 香 描述 
content text 是 否 | 否 | 否 | 否 | 文章 内 容 
posid varchar(10) 是 否 否 否 否 是 否 推 荐 产品 
留言 息 表 guestbook 见 表 5-7。 
表 5-7 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
id int(11) 否 是 | 否 | 是 | 是 | 记录 id 
title varchar(50) 是 否 否 否 否 | 留言 标题 
pubdate varchar(50) 是 否 否 否 否 | 留言 日 期 
name varchar(30) 是 否 否 否 否 | 留言 人 
tel varchar(20) 是 否 否 否 否 | 留言 人 联系 电话 
qq varchar(15) 是 否 否 | 否 否 | 留言 人 QQ 
email varchar(30) 是 否 否 否 否 | 留言 人 E-mail 
content text 是 否 者 否 否 | 留言 内 容 
deal varchar(5) 是 否 否 否 否 | 是 否 处 理 
QQ 客服 信息 表 qq 见 表 5-8。 
表 5-8 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
id int(11) 否 是 | 否 | 是 | 是 | 记录 id 
title varchar(30) 是 否 | 否 | 否 | 否 | 客服 标题 
qqnum varchar(15) 是 否 否 否 否 QQ 号 码 
truename varchar(20) 是 否 | 否 | 否 | 否 | 客服 真实 姓名 
友情 链接 信息 表 friend 见 表 5-9。 
表 5-9 
字段 名 类 型 Null | 主键 | 外 键 | 唯一 | 自 增 说 明 
id int(11) 否 是 | 否 | 是 | 是 | 记录 id 
title varchar(20) 是 否 | 否 | 否 | 否 | 友情 链接 标题 
url varchar(50) 是 否 | 否 | 否 | 否 | 链接 地 址 


























54 数据 库 的 实施 


数据 表 设 计 完 成 并 检查 无 误 后 ,就 在 MySQL 服务 器 上 实施 了 , 即 在 MySQL 数据 库 服 


务 器 上 建立 数据 库 ,然后 按照 5. 3 节 的 数据 表 设 计 要 求 创建 数据 表 。 
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5.4.1 创建 数据 库 
创建 数据 库 company ,语句 如 下 : 


CREATE DATABASE company DEFAULT CHARACTER SET utf8 COLLATE utf8 general ci; 


5.4.2 创建 数据 表 
开始 创建 数据 表 前 ,首先 选择 要 操作 的 数据 库 ,代码 如 下 : 
USE 'company;' 
(1) 创建 “网 站 基本 配置 信息 表 ”,SQL 语句 如 下 。 


CREATE TABIE 'config' ( 
'iad' int (11) NOT NULL AUTO_INCREMENT, 
'site title' varchar (50) DEFAULT NULL COMMENT "网 站 标题 rn'， 
'site_url' varchar (50) DEFAULT NULL COMMENT ' 网 站 地 址 '， 
"site logo' varchar (100) DEFAULT NULL, 
'site_keywords' text COMMENT ' 网 站 关键 字 '， 
'site description' text COMMENT ' 网 站 描述 '， 
"site_copyright' varchar (100) DEFAULT NULL COMMENT ' 权 版 信息 '， 
'company_name' varchar (50) DEFAULT NULL COMMENT ' 公 司 名 称 '， 
'company_phone' varchar (20) DEFAULT NULL COMMENT ' 公 司 联系 电话 '， 
'company fax' varchar (20) DEFAULT NULL, 
'company_email' varchar (30) DEFAULT NULL COMMENT ' 公 司 电 子 邮 箱 '， 
'company_weixin' varchar (30) DEFAULT NULL COMMENT ' 微 信 '， 
"campany_ewm' varchar (100) DEFAULT NULL COMMENT ' 公 司 二 维 码 '， 
'company_address' varchar (50) DEFAULT NULL COMMENT ' 公 司 地 址 '， 
PRIMARY KEY ("id') 

) ENGINE=MyISAM DEFAULT CHARSET=utf8; 


(2) 创建 “管理 员 信 息 表 ”,SQL 语句 如 下 。 


CREATE TABLE "admin' ( 
"id' int (11) NOT NULL AUTO INCREMENT COMMENT ' 管 理 员 id'， 
'admin_name' varchar (50) DEFAULT NULL COMMENT ' 管 理 员 账号 '， 
'admin pass' varchar (50) DEFAULT NULL COMMENT ' 管 理 员 密码 '， 
PRIMARY KEY ("id') 

) ENGINE=MyISAM DEFAULT CHARSET= utf87 


(3) 创建 “焦点 幻灯 信息 表 ”,SQL 语句 如 下 。 


CREATE TABLE 'slide' ( 
"id' int (11) NOT NULL AUTO INCREMENT, 
‘title' varchar (100) DEFAULT NULL, 
‘thumbnail' varchar (255) DEFAULT NULL, 
"Link' varchar (100) DEFAULT NULL, 
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"orderiq' int (11) DEFAULT NOLL, 
PRIMARY KEY ("id') 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 


(4) 创建 “ 单 页 信息 表 ”,SQL 语句 如 下 。 


CREATE TABLE 'single' ( 
"id" int (11) NOT NULL AUTO INCREMENT, 
'title' varchar (50) DEFAULT NULL COMMENT ' 标 题 '， 
'comefrom' varchar (20) DEFAULT NULL COMMENT ' 来 源 '， 
"pubdate' varchar (20) DEFAULT NULL COMMENT ' 发 布 日 期 '， 
"keywords' text COMMENT ' 关 键 字 '， 
"description' text COMMENT ' 描 述 '， 
'content' text COMMENT ' 内 容 '， 
PRIMARY KEY ('id') 

) ENGINE=MyISAM DEFAULTCHARSET= utf8; 


(5) 创建 “文章 信息 表 ”,SQL 语句 如 下 。 


CREATE TABLE ‘article'( 
"id"' int (11) NOT NULL RUTO_INCREMENT COMMENT ' 文 章 id'， 
'title' varchar (50) DEFAULT NULL COMMENT ' 文 章 标题 '， 
'comefram' varchar (20) DEFAULT NULL COMMENT ' 来 源 '， 
"pubdate' varchar (20) DEFAULT NULL COMMENT ' 发 布 日 期 '， 
"keywords' text CHARACTER SET utf8mb3 COMMENT ' 关 键 字 '， 
"description' text CHARACTER SET utf8mb3 COMMENT ' 描 述 '， 
'content' text CHARACTER SET utf8mb3 COMMENT ' 内 容 '， 
'posid' varchar (50) CHARACTER SET utf8mb3 DEFAULT NULL COMMENT ' 推 荐 位 '， 
PRIMARY KEY ('id') 

) ENGINE=MyISAM DEFAULT CHARSET=utf8; 


(6) 创建 “产品 信息 表 ”,SQL 语句 如 下 。 


CREATE TABLE ‘produce' ( 
"id' int (11) NOT NULL RUTO_INCREMENT COMMENT ' 文 章 id'， 
'title' varchar (50) DEFAULT NULL COMMENT ' 产 品 标题 '， 
"comefram' varchar (20) DEFAULT NULL COMMENT ' 来 源 '， 
"pubdate' varchar (20) DEFAULT NULL COMMENT ' 发 布 日 期 '， 
"thumbnail' varchar (100) DEFAULT NULL COMMENT ' 缩 略图 '， 
"keywords' text COMMENT ' 关 键 字 '， 
"description' text COMMENT ' 描 述 '， 
"content' text COMMENT ' 内 容 '， 
'posid" varchar (50) DEFAULT NULL COMMENT ' 推 荐 位 '， 
PRIMARY KEY ('id') 

) ENGINFE—=MyISAM DEFAULT CHARSET= utf8; 


(7) 创建 “留言 信息 表 ”,SQL 语句 如 下 。 
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CREATE TABLE "guestbook' ( 
"id' int (11) NOT NULL AUTO INCREMENT, 
'title' varchar (50) DEFAULT NULL COMMENT ' 留 言 标题 '， 
"pubdate' varchar (50) DEFAULT NULL COMMENT "留言 时 间 '， 
"name' varchar (30) DEFAULT NULL COMMENT ' 称 呼 '， 
'tel' varchar (20) DEFAULT NULL COMMENT ' 手 机 号 码 '， 
"qq' varchar (15) CHARACTER SET utf32 DEFAULT NULL COMMENT 'qq', 
"email' varchar (30) DEFAULT NULL COMMENT ' 邮 箱 '， 
'content' text COMMENT ' 留 言 内 容 '， 
"deal' varchar (5) DEFAULT ' 否 ' COMMENT ' 是 否 处 理 '， 
PRIMARY KEY ('id') 

) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

(8) 创建 “QQ 客服 信息 表 ”,SQL 语句 如 下 。 

CREATE TABLE 'qq' ( 
"id' int (11) NOT NULL COMMENT "id', 
'title' varchar (30) DEFAULT NULL COMMENT ' 标 题 '， 
"qqnum' varchar (15) DEFAULT NULL COMMENT 'QQ 号 码 '， 
'truename' varchar (20) DEFAULT NULL COMMENT ' 客 服 姓名 '， 
PRIMARY KEY ("id') 

) ENGINE=MyISAM DEFAULT CHARSET=utf8; 


(9) 创建 “友情 链接 信息 表 ”,SQL 语句 如 下 。 


CREATE TABLE 'friend' ( 
"id' int (11) NoT NULL, 
'title' varchar (20) DEFAULT NULL COMMENT ' 标 题 '， 
"url' varchar (50) DEFAULT NULL COMMENT ' 链 接地 址 '， 
PRIMARY KEY ('id') 
) ENGINE=MyISAM DEFAULT CHARSET= utf8; 
至 此 ,数据 表 创建 完成 ,重新 检查 无 误 后 ,数据 库 设计 任务 结束 。 
【知识 讲解 


1. 关于 E-R 图 

(1) E-R 图 的 定义 

E-R 图 也 称 实 体 一 联系 图 (Entity Relationship Diagram) ,提供 了 表示 实体 类 型 .属性 
和 联系 的 方法 ,用 来 描述 现实 世界 的 概念 模型 。 

(2) E-R 方 法 

E-R 方法 是 “实体 一 联系 方法 ”(Entity-Relationship Approach) 的 简称 。 它 是 描述 现实 
世界 概念 结构 模型 的 有 效 方法 ,是 表示 概念 模型 的 一 种 方式 。 其 用 矩 形 表示 实体 型 ,矩形 框 
内 写 明 实体 名 ;用 椭圆 表示 实体 的 属性 ,并 用 无 向 边 将 其 与 相应 的 实体 型 连接 起 来 ;用 萎 形 
表示 实体 型 之 间 的 联系 ,在 萎 形 框 内 写 明 联系 名 ,并 用 无 向 边 分 别 与 有 关 实 体型 连接 起 来 ， 
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同时 在 无 向 边 旁 标 上 联系 的 类 型 (1 : 1、1 : n 或 m : 7)。 

(3) E-R 构成 要 素 

构成 E-R 图 的 基本 要 素 是 实体 型 .属性 和 联系 ,其 表示 方法 如 下 。 

O@ 实体 (Entity)。 具 有 相同 属性 的 实体 具有 相同 的 特征 和 性 质 ,用 实体 名 及 其 属性 名 
集合 来 抽象 和 刻画 同类 实体 ;在 ER 图 中 用 矩形 表示 ,矩形 框 内 写 明 实体 名 ,如 图 5-10 
所 示 。 

@ 属性 (Attribute) 。 一 个 实体 可 由 若干 个 属性 来 刻画 ,在 E-R 图 中 用 椭圆 形 表 示 ,并 
用 无 向 边 将 其 与 相应 的 实体 连接 起 来 ,比如 学 生 的 姓名 、 学 号 ,性 别 、 都 是 属性 ,如 图 5-11 
所 示 。 








顾客 购买 商品 

















5-10 5-11 


@ 联系 (Relationship)。 联 系 也 称 关 系 ,在 信息 世界 中 用 于 反映 实体 内 部 或 实体 之 间 
的 联系 。 实 体内 部 的 联系 通常 是 指 组 成 实体 的 各 属性 之 间 的 联系 ;实体 之 间 的 联系 通常 是 
指 不 同 实 体 集 之 间 的 联系 。 在 E-R 图 中 用 菱形 表示 ,菱形 框 内 写 明 联系 名 ,并 用 无 向 边 分 
别 与 有 关 实 体 连接 起 来 ,同时 在 无 向 边 旁 标 上 联系 的 类 型 (1 : 1、1 : n 或 m:n)。 比 如 老师 
人 如 果 是 弱 实 体 的 联系 , 则 在 菱形 外 面 再 














了 ， 
一 对 一 联系 (1 : 1D: 例如 ,一 个 部 门 有 一 个 经 [ 开 T 上 << 有 > 5 
理 , 而 每 个 经 理 只 在 一 个 部 门 任职 , 则 部 门 与 经 理 5-12 


的 联系 是 一 对 一 的 ,如 图 5-12 所 示 。 
一 对 多 联系 (1 : n): 例如 ,一 个 班级 与 学 生 之 间 存 在 一 对 多 的 联系 “有 ”, 即 一 个 班级 可 
以 有 多 个 学 生 ,但 是 每 个 学 生 只 能 属于 一 个 班级 ,如 图 5-13 所 示 。 


CS 7 
AP 
编号 
班级 | < 有 


图 5-13 




















多 对 多 联系 (Cm : n): 例如 ,学 生 与 课程 间 的 联系 (“学 ”) 是 多 对 多 的 , 即 一 个 学 生 可 以 
学 多 门 课程 ,而 每 门 课程 可 以 有 多 个 学 生来 学 ,如 图 5-14 所 示 。 

当然 ,联系 也 可 能 有 属性 ,例如 :学生 * 学 ? 某 门 课程 所 取得 的 成 绩 , 既 不 是 学 生 的 属性 也 
不 是 课程 的 属性 。 由 于 “成 绩 ” 既 依赖 于 某 名 特定 的 学 生 又 依赖 于 某 门 特定 的 课程 ,所 以 它 
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(4) 画 E-R 图 的 步 又 

Q@ 确定 所 有 的 实体 集合 。 

@ 选择 实体 集 应 包含 的 属性 。 

Gg) 确定 实体 集 之 间 的 联系 。 

@ 确定 实体 集 的 关键 字 , 用 下 划 线 在 属性 上 表明 关键 字 的 属性 组 合 。 

@ 确定 联系 的 类 型 ,在 用 线 将 表示 联系 的 菱形 框 联系 到 实体 集 时 ,在线 旁 注 明 是 1 或? 


(多 ) 来 表示 联系 的 类 型 。 


2. MySQL 数据 库 的 基本 操作 

(1) 连接 数据 库 

mysql 命令 用 户 连接 数据 库 的 语法 格式 如 下 : 

mysql -h 主机 地 址 -u 用 户 名 -p 用 户 密码 

连接 到 本 机 上 的 MySQL 

首先 打开 DOS 窗口 ,然后 进入 mysql\bin 目录 ,再 输入 mysql -u root -p 命令 , 按 Enter 


键 后 根据 提示 输入 密码 。 


镀 注意 : 用 户 名 前 可 以 有 空格 也 可 以 没有 空格 ,但 是 密码 前 必须 没有 空格 ,否则 会 让 


你 重新 输入 密码 。 
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四 连接 到 远程 主机 上 的 MySQL 
假设 远程 主机 的 下 为 110.110.110.110, 用 户 名 为 root. 密 码 为 abcd123。 则 输入 以 下 命令 : 


mysql —h110.110.110.110 -u root -P 123; 
@ 退出 MySQL 命令 


exit ( 回 车 ) 
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(2) 修改 用 户 密 码 

mysqladmin 命令 用 于 修改 用 户 密码 。mysqladmin 命令 格式 : 
mysqladmin -u 用 户 名 -p 旧 密 码 password 新 密码 

@ 给 root 加 个 密码 ab12( 假 设 原 来 没有 密码 ) 

首先 在 DOS 下 进入 mysql\bin 目录 ,然后 输入 以 下 命令 : 


mysqladmin -u root -password abl2; 


铺 注 意 : 因为 开始 时 root 没有 密码 ,所 以 “-p 旧 密码 "一 项 就 可 以 省 略 。 

@ 再 将 root 的 密码 改 为 abc888 

mysqladmin -u root -P abl2 password abc888 

(3) 新 增 用 户 

GRANT ON 命令 用 于 增加 新 用 户 并 控制 其 权限 ,命令 格式 如 下 : 

GRANT SELECT ON 数据 库 .* to 用 户 名 @ 登录 主机 identified by "密码 "; 

增加 一 个 用 户 testl ,密码 为 abc, 让 他 可 以 在 任何 主机 上 登录 ,并 对 所 有 数据 库 有 查询 、 
插入 、 修 改 、 删 除 的 权限 。 首 先 用 root 用 户 连 入 MySQL 服务 器 ,然后 输入 以 下 命令 : 

GRANT SELECT, INSERT, UPDATE, DELETE ON x . # to [email=test1l@"$%]test1l@ "% [/email]Identified 

by "abc™; 

增加 的 用 户 是 十 分 危险 的 ,假如 某 个 人 知道 testl 的 密码 ,那么 就 可 以 在 Internet 上 的 
任何 一 台 计 算 机 上 登录 MySQL 数据 库 并 对 数据 进行 各 种 操作 ,解决 办 法 如 下 。 

增加 一 个 用 户 test2 ,密码 为 abc, 让 他 只 可 以 在 localhost 上 登录 ,并 可 以 对 mydb 数据 
库 进 行 查询 插入、 修改 .删除 的 操作 (localhost 指 本 地 主机 , 即 MySQL 数据 库 所 在 的 那 台 
主机 ) ,这 样 用 户 即使 知道 test2 的 密码 ,也 无 法 从 Internet 上 直接 访问 数据 库 , 只 能 通过 
MySQL 主机 上 的 Web 页 来 访问 了 。 


GRANT SELECT, INSERT, UPDATE, DELETE ON mydb. * to [email= test2@ localhost]test2@ localhost [/ 
email] identified by "abc"; 


如 果 你 不 想 test2 有 密码 ,可 以 再 加 如 下 命令 将 密码 消 掉 : 


GRANT SELECT, INSERT, UPDATE, DELETE ON mydb. * to [email= test2@ localhost]test2@ localhost [/ 
email] identified by ""; 


(4) 创建 数据 库 
CREATE 命令 用 于 创建 数据 库 。CREATE 命令 格式 : 


CREATE DATABASE < 数据 库 名 >; 
铺 注意 : 创建 数据 库 之 前 要 先 连 接 MySQL 服务 器 。 
例如 ,建立 一 个 名 为 db_test 的 数据 库 , 其 命令 如 下 : 


CREATE DATABASE xhkdb; 
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(5) 显示 数据 库 
show databases 命令 用 于 显示 所 有 数据 库 。 
show databases 命令 格式 如 下 : 


show databases; (注意 : 最 后 有 个 s) 
例如 ,要 显示 数据 库 服 务 器 所 有 的 数据 库 , 命 令 如 下 : 
show databases; 


(6) 删除 数据 库 
DROP 命令 用 于 删除 数据 库 ,命令 格式 如 下 : 


DROP ”DATABASE < 数据 库 名 > ; 

【 例 1】 删除 一 个 已 经 确定 存在 的 数据 库 db_test, 命 令 如 下 : 

DROP DATABASEdb test; 

执行 后 的 结果 如 下 : 

Query OK，0 rows affected(0.00 sec) 

【 例 2】 删除 一 个 不 确定 存在 的 数据 库 db_stusys ,命令 如 下 : 

drop database db_stusys; 

执行 后 的 结果 如 下 : 

ERROR 1008 (HY000) : Can't drop database 'db stusys'; database doesn't exist 

以 上 结果 的 意思 是 : 发 生 错 误 ,不 能 删除 drop_database 数据 库 ,该 数据 库 不 存在 。 

如 果 将 命令 改写 为 

drop database if exists db stusys7 

则 执行 的 结果 是 : 

Query OK，0 rows affected，1 warning(0.00 sec) 

该 结果 的 意思 是 : 产生 一 个 警告 ,说 明 此 数据 库 不 存在 。 

(7) 使 用 数据 库 

use 命令 用 于 把 指定 的 数据 库 作为 默认 (当前 数据库 使 用 ,用 于 后 续 语 句 。 该 数据 库 
保持 为 默认 数据 库 ,直到 use 语句 的 结尾 ,或 者 直到 出 现下 一 个 不 同 的 use 语句 。 

use 命令 格式 : use< 数 据 库 名 >; 

例如 ,把 db_test 数据 库 设置 为 默认 数据 库 , 命 令 如 下 : 

usedb test; 

执行 后 的 结果 为 


Database changed 
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(8) 创建 数据 表 

CREATE TABLE 命令 用 来 创建 数据 表 。 

CREATE TABLE 命令 格式 : 

CREATE TABLE < 表 名 > (< 字段 名 1>< 类 型 1> [, ..< 字 有 段 名 n>< 类 型 n>]); 
例如 ,建立 一 个 名 为 menber 的 表 , 如 表 5-10 所 示 。 

















表 5-10 
字段 名 类 型 空 (NULL) 主键 | 外 键 自 增 | 默认 值 
id int 否 是 否 是 
name varchar(30) 否 否 否 否 
sex varchar(2) 否 否 否 否 
age smallint 是 否 否 否 0 




















mysql> CREATE TABLE menber ( 
>id int NOT NULL primary key auto increment, 
>name varchar (30) NOT NULL, 
> sex varchar (2) NOT NULL, 
>age smallint DEFAULT NULL DEFAULT '0'); 


(9) 获取 数据 表 结 构 
desc 命令 用 于 获取 数据 表 结 构 。desc 命令 格式 如 下 : 


desc 表 名 ; 

同样 ,使 用 以 下 命令 格式 也 能 获取 数据 表 的 结构 : 

show columns FROM 表 名 ; 

例如 ,查看 学 生 信息 表 student 的 数据 表 结 构 ,命令 如 下 : 
desc student; 

或 

show columns FROM student; 


(10) 删除 数据 表 
drop table 命令 用 于 删除 数据 表 。drop table 命令 格式 如 下 : 


drop table < 表 名 >; 
例如 ,删除 表 名 为 info 的 表 , 其 命令 如 下 : 
drop table info; 


(11) 向 表 中 插入 数据 
INSERT INTO 命令 用 于 向 表 中 插入 数据 。INSERT INTO 命令 格式 如 下 : 


INSERT INTO < 表 名 > [(< 字 段 名 1> [, -< 字段 名 nm >])] VALUES( 值 1)[,( 值 n)]; 
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例如 ,向 student 表 中 插入 一 条 记录 ,记录 如 下 : 学 号 为 2007001, 姓 名 为 张 东 , 性 别 为 
男 , 班 级 为 13 级 计算 机 应 用 1 班 。 


INSERT INTO student (stu_ number, stu_name sex class) VALUES (2007001, '" 张 东 ', ' 男 ', '13 级 计算 机 
应 用 1 班 '); 


(12) 查询 表 中 的 数据 

中 查询 所 有 行 命令 格式 如 下 : 

SELECT < 字段 1, 字段 2，..>FROM < 表 名 >WHERE < 表达 式 >; 
例如 ,查看 student 表 中 所 有 的 数据 : 

SELECT * FROM student; 

@ 查询 前 几 行 数据 

例如 ,查看 MyClass 表 中 前 2 行 的 数据 : 

SELECT * FROM student order by id LIMIT 0,2; 


SELECT 一 般配 合 WHERE 使 用 ,以 查询 更 精确 更 复杂 的 数据 。 
(13) 删除 记录 

DELETE FROM 命令 用 于 删除 表 中 的 数据 。 

DELETE FROM 命令 格式 如 下 : 

DELETE FROM 表 名 WHERE 表达 式 

例如 ,删除 表 student 中 学 号 为 2007001 的 记录 : 


DELETE FROM student WHERE stu number=2007001; 


(14) 修改 表 中 的 数据 
UPDATE set 命令 用 来 修改 表 中 的 数据 。UPDATE set 命令 格式 如 下 : 


UPDATE 表 名 set 字段 = 新 值 ,… WHERE 条 件 ; 
例如 ,将 student 表 中 学 号 为 2007001 的 学 生 的 姓名 修改 为 李 四 , 命 令 如 下 : 
UPDATE student set name= ' 李 四 ' WHERE stu number=2007001; 


(15) 增加 字段 
alter add 命令 用 来 增加 表 的 字段 。alter add 命令 格式 如 下 : 


alter table 表 名 add 字 段 类 型 其 他 ; 


例如 ,在 student 表 中 添加 了 一 个 字段 address, 类 型 为 varchar(40) ,默认 值 NULL, 命 
令 如 下 : 


alter table student add address varchar (40) DEFAULT NULL; 
@ 加 索引 ,命令 的 格式 如 下 : 


alter table 表 名 add index 索引 名 字段 名 1[, 字 有 段 名 2 .…]); 
102 





工作 任务 5 数据 库 设计 | 


例如 ,在 employee 表 中 增加 名 为 emp_name 的 索引 ,索引 的 字段 为 name, 命 令 如 下 : 
alter table employee add index emp_name (name) 

@ 加 主 关键 字 的 索引 ,命令 的 格式 如 下 : 

alter table 表 名 add primary key (字段 名 ); 

例如 : 

alter table employee add primary key (id); 

@ 加 唯一 限制 条 件 的 索引 ,命令 的 格式 如 下 : 
alter table 表 名 add unique 索引 名 (字段 名 ); 

例如 : 

alter table employee add unique emp_ name? (cardnurber); 
@ 删除 某 个 索引 ,命令 的 格式 如 下 : 

alter table 表 名 drop index 索引 和 名; 

例如 : 

alter table employee drop index emp name; 

@ 增加 字段, 命令 的 格式 如 下 : 

Alter table 表 名 add 字段 名 字段 类 型 ; 

例如 : 

altertable employee add age int; 

@ 修改 原 字段 名 称 及 类 型 ,命令 的 格式 如 下 : 
alter table 表 名 change 原 字段 名 新 字段 名 新 字段 类 型; 
例如 : 

alert table student change stu_name name varchar(20) 
@ 删除 字段 ,命令 的 格式 如 下 : 

Alter table 表 名 drop 字段 名 ; 

例如 : 

alter table student drop age; 

(16) 修改 表 名 ,命令 的 格式 如 下 : 

rename table 原 表 名 to 新 表 名 ; 


例如 ,把 student 表 的 名 字 更 改 为 stu, 命 令 如 下 : 
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rename table student to stu; 


(17) 备份 数据 库 
mysqldump 命令 用 来 备份 数据 库 。 
mysqldump 命令 在 DOS 的 [url==file:/ 八 \mysql\\bin] Nmysql\\bin[/url] 目 录 下 


@ 导出 整个 数据 库 ( 导 出 文件 默认 保存 在 mysql\bin 目录 下 ) ,命令 的 格式 如 下 : 
mysqldump -u 用 户 名 -p 数据 库 名 > 导出 的 文件 名 
例如 : 
mysqldump -u user name - p123456 database name > outfile name.sql 
@ 导出 一 个 表 , 命 令 的 格式 如 下 : 
mysqldump -u 用 户 名 -p 数据 库 名 表 名 > 导出 的 文件 名 
例如 : 
mysqldump -u user name -P database name table name >outfile name.sql 
@ 导出 一 个 数据 库 结构 ,命令 的 格式 如 下 : 
mysqldump -u 用 户 名 -p -d - add- drop- table 数据 库 名 > 导出 的 文件 名 
其 中 ,“-d” 表 示 没 有 数据 ,“-add-drop-table” 表 示 在 每 个 create 语句 之 前 增加 一 个 drop 
table 语句 。 
例如 : 
mysqldump -u user name -p -d -add- drop- table database name >outfile name.sql 
@ 带 语言 参数 导出 ,命令 的 格式 如 下 : 
mysqldump -u 用 户 名 -p -default- character- set= 默 认 字符 编码 - set- charset= 字 符 集 - skip- 
opt 数据 库 名 > 导出 的 文件 名 
例如 : 


mysqldump -uroot -P -default- character- set= latinl - set- charset=utf8 - skip- opt database 

name > outfile name.sql 

通过 命令 行 的 方式 ,有 利于 对 SQL 语句 的 记忆 ,有 利于 加 深 对 数据 库 操 作 的 理解 ,但 
是 ,从 开发 效率 角度 来 分 析 ,这 种 方式 的 工作 效率 不 高 ,因此 ,在 实际 的 项 目 开 发 中 ,往往 引 
人 第 三 方 MySQL 数据 库 管理 工具 ,如 phpmyadmin navicate 等 ,这 些 都 是 非常 好 用 的 工 
具 , 具 体 如 何 使 用 不 作 详 细 讲 解 。 
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(人 :pe 


。 能 够 根据 功能 需求 ,使 用 PHP 动态 网 站 开发 技术 开发 项 目 功能 模块 ,以 培养 学 生 
PHP 项 目的 开发 能 力 。 

培养 学 生 分 析 问 题 与 解决 问题 的 能 力 。 

。 培养 学 生 良 好 的 逻辑 思维 能 力 。 

。 培养 学 生 良好 的 代码 编写 规范 和 严谨 的 工作 态度 。 


【SL 知识 目标 

。 掌握 PHP 基础 知识 。 

。 掌握 常用 PHP 函数 的 应 用 。 

。 掌握 在 线 编辑 器 在 PHP 中 的 应 用 。 

。 掌握 PHP 操作 数据 库 数 据 的 四 种 方式 , 即 写 入 数据 ,查询 数据 .修改 数据 删除 

数据 。 

。 掌握 分 页 的 原理 与 应 用 
/但 
【二 任务 描述 

本 任务 需 完成 13 个 子 任务 ,包括 配置 开发 环境 、 开 发 登录 验证 模块 、 开 发 后 台 框 架 模 
块 .开发 网 站 基本 配置 模块 、 开 发 管理 员 管 理 模块 、 开 发 单 页 管理 模块 、 开 发 文章 管理 模块 、 
开发 产品 管理 模块 、 开 发 留言 管理 模块 、 开 发 焦点 幻灯 管理 模块 、 开 发 QQ 客服 管理 模块 、 开 
发 友情 链接 管理 模块 、 开 发 退出 后 台 模 块 。 





6.1 配置 开发 环境 


搭建 PHP 环境 的 方法 有 很 多 ,主要 分 为 独立 安装 和 集成 安装 两 种 ,独立 安装 需要 分 别 
下 载 Apache、MySQL 和 PHP 等 软件 ,而 集成 安装 只 需要 下 载 一 个 软件 安装 包 就 可 以 了 。 
对 于 初学 者 ,为 了 节约 时 间 , 更 快 地 入 门 , 只 需要 学 习 集 成 安装 这 一 种 方法 就 够 用 了 。 

集成 安装 包 主 要 有 WampServer、appserv、easyphp 等 ,只 要 下 载 其 中 一 种 就 可 以 了 。 
下 面 以 appserv 为 例 给 大 家 讲解 安装 的 过 程 。 
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首先 到 appserv 官方 网 站 (http://www. appservnetwork. com/en/) 下 载 安装 包 。 接 下 
来 按 以 下 的 步骤 进行 安装 。 


(1) 双击 安装 包 文件 ,依次 单 击 Next 按钮 , 单 击 IAgree 按钮 ,然后 选择 要 安装 的 目录 ， 
再 单 击 Next 按钮 ,如 图 6-1 所 示 。 


Welcome to the AppServ 2.5.10 
Setup Wizard 


Ts Wizerd wi guide you through the netalation of AppServ 


is recommended that you dose all other applications 
ER This will make it possible to update 
relevant system fles without having to reboot your 
computer. 


Cidk Next to continue. 
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(2) 保持 默认 值 , 单 击 Next 按钮 ,如 图 6-2 所 示 。 


License Agreement 
Please review the license terms before instaling AppServ 2.5.10. 





Press Page Down to see the rest of the agreement. 


lt pie eee 
Version 2.1 February 1999 


opt es 1999 Free Software Foundation, 

Place, Suite 330, Boston, MA 02111- Ex UsA 
Everyore ls be 人 op end odote 
Se 


Crhis is the first released version of the Lesser GPL， It akso counts 
as the successor of the GNU Library Public License, version 2, hence 


the version number 2.1.] 


If you accept the terms of the agreement, dick I Agree to continue. You must accept the 
agreement to install AppServ 2.5. 10. 


Nullsoft Install System v2,18 





图 6-2 





(3) 接 下 来 配置 Apache 中 的 Server Name、Administrator”s Email Address 以 及 
HTTP 服务 的 端口 ,Server Name 一 般 设 置 为 localhost, 默 认 端口 为 80。 如 果 80 端口 已 有 
其 他 服务 ,需要 修改 HTTP 的 服务 端口 ,比如 8080 ,邮箱 填 写 一 个 自己 的 邮箱 或 者 其 他 邮 
箱 地 址 ,然后 单 击 Next 按钮 ,如 图 6-3 所 示 。 

(4) 配置 AppServ 中 的 MySQL 服务 用 户 名 和 密码 。MySQL 服务 数据 库 的 默认 管理 
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账户 为 root, 默 认 字 符 集 为 UTF-8, 用 户 根据 自己 的 需要 可 修改 相关 的 字符 集 编码 ,一般 英 
文 用 UTF-8。 配 置 完成 后 , 单 击 Install 按钮 进行 安装 ,如 图 6-4 所 示 。 








Nullsoft ina 
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(5) 单 击 Finish 按钮 完成 安装 ,并 启动 相关 服务 ,如 图 6-5 所 示 。 


AppServ 2.6.0 has been nstaled on your computer. 
Cick Finish to dose this wizard. 


圆 sertApade 


pe 
ba 
FE 
EE 
& 
本 
Os 
OO 





;区 
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(6) 验证 AppServ 是 否 安装 成 功 。 在 浏览 器 地 址 栏 输入 http://localhost 或 者 是 
127.0.0.1, 按 Enter 键 ,看 到 如 图 6-6 所 示 的 界面 , 则 表示 安装 成 功 。 

(7) 安装 成 功 后 ,进入 到 安装 目录 ,可 以 看 到 如 图 6-7 所 示 的 目录 结构 ,其 中 www 文件 
夹 为 网 站 的 根 目 录 。 若 要 御 载 该 软件 ,双击 Uninstall-AppServ2. 6. 0. exe 文件 即 可 。 








[SLSFERDEE 
= 





me AT 
The AppServ Open Project - 2.6.0 for Windows 


如 aaae wanogr wwen 21101 
4) Pi dermagon Voion Cen 
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Noor reg on source see eat portage or Wndows reaes 


“ Apoche Web Server Vowen 22. 


名 称 


县 Apache22 
B wysQL 
php6 


Bw 


@ Uninstall-AppServ2.6.0.exe 








图 6-7 


62 开发 登录 验证 模块 


在 开发 该 模块 前 ,应 先 把 任务 5 产生 的 文件 ( 即 整个 web 文件 夹 ) 剪 切 至 网 站 的 根 目录 ( 即 


www) ,本 模块 产生 的 文件 存放 至 “www/web/admin” 目 录 以 及 该 目录 下 相应 的 文件 夹 中 。 
1. 设计 登录 验证 页 面 


(1) 设计 登录 验证 版 面 


该 模块 作为 进入 网 站 后 台 的 和 人口 ,因此 ,在 版 面 设计 中 要 体现 账号 和 密码 文本 域 , 同 时 
应 包含 登录 后 台 按 钮 ,页 面 的 色调 采用 蓝 色 ,该 页 的 版 面 效 果 如 图 6-8 所 示 。 
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(2)“ 登 录 验 证 ?版 面 切 图 

版 面 图 设计 出 来 以 后 ,使 用 切 图 技术 ,将 版 面 图 转换 成 网 页 文件 login. php 并 保存 到 
www/web/admin 目录 下 。 

@ 编写 结构 与 内 容 代码 ,代码 如 下 。 


1 


ownaumw nb 


Iw 
oS 


< !DOCTYPE htm] PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 企 业 网 站 管理 系统 < /title> 
</head> 
<body> 
<div id="main"> 
<div id= "wrapper"> 
<form action="login check.php" method="Post" id="forml" onSubmit="return chk 
(this)"> 
<div id= "sys name"> 
<p> gnbsp;< /p> 
<p> gnbsp;< /p> 
<p> 企 业 网 站 管理 系统 < /p> 
</div> 
<ul id="cont"> 
<1i> 
<label class= "lb" for= "uname"> 账 号 < /label> 
< input name="admin name" id="uname" type="text" class="ip" value= 
"" maxlength= "18" /> 
</1i> 
<1i> 
<label class= "lb" for= "pwd"> 密 码 < /label> 
< input name= "admin pass" id="pwd" type= "password" class= "ip" value="" 
maxlength= "10" /> 


</1i> 


<1i>< span> 
<input type= "image" src= "images/ente.png" title= "登录 系统 "/> 
</span></li> 
</ul> 
<P id= "copy">< /p> 
</fom> 
</div> 
</div> 
< /body> 
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E23 


</html> 


@ 编写 CSS 实现 该 页 面 的 具体 表现 代码 。 编 写 CSS(login. css) 文 件 并 保存 到 jiaocai/ 
admin/css 目录 中 ,再 把 文件 通过 超 链接 的 方式 引入 到 login. php 页 面 。login. css 文件 的 完 


整 代码 如 下 。 

2 @ charset "utf- 8"; 

党 body {margin: 0; padding: 0; text- align: center; background: url (../images/main bg.gif) 
repeat- x top center # 0e85c2; font - size: 12px; font- family: arial, helvetica, sans— 

serif, "宋体 ";} 

3 img{border:0;} 

4 ul,1i{list- style:none;} 

5 a{color:# fff;text-— decoration:none;outline:none;} 

6 a:link{color:#fff;text- decoration:none;} 

7 a:visited{color:# fff;text— decoration:none;} 

8 a:hover{color:# fe9715;text- decoration:underline;} 

9 #main{width:960px;margin:0 auto;} 

10 #1ogo{position:absolute; top:35px; left:180px; width: 694px; height: 466px; background: url (../ 
images/login logo.gif) no- repeat;} 

bE # wrapper {width: 694px; height: 466px; top: 188px; margin - left: auto; margin - right: auto; 
background:url (. ./images/loginmain bg.gif) no- repeat;position:relative;} 

12 #3ys_name{ 

13 position: absolute; 

14 top: 67px7 

15 left: 95px; 

16 font- size: 23px; 

17 font- family: "微软 雅 黑 "; 

18 height: 150px; 

19 background: url(../images/login logo.png) center top no- repeat; 

20 3 

21 #cont{ 

22 margin: 0; 

23 padding: 0; 

24 position: absolute; 

4 top: 96px; 

26 left: 358px; 

27 和 

28 # cont li{height:35px;line- height:35px;text- align:left;} 

29 #cont 1i label.lb{float:left;width:50px;padding:0 Spx;line- height:35px; text- align: 
right;} 

30  #cont 1i input.ipfwidth:132px;border:# 41albe lpx solid;font- size:12px;background:url 
(../images/inputstyle.gif) repeat— x; color:# 898989; font- family:, "verdana"; height: 
20px; line— height :20px;padding:2px;} 

31  #cont 1i span{display:block;padding- left:60px;} 

32  #cont span{padding- left:3px;padding- top:6px;} 

33 . entestyle {background: url (../images/login logo. gif) no - repeat; width: 115px; 
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height:36px;} 
34  #copy{margin:0 auto;position:relative;top:345px;color:#fff;} 
为 了 增加 该 模块 的 用 户 体 验 ,在 没有 输入 账号 和 密码 的 情况 下 单 击 “ 登 录 后 台 ” 按 
钮 ,应 弹出 提示 信息 为 “请 输入 账号 !1" 或 “请 输入 密码 1”。 在 login. php 文件 的 二 head 二 与 
一 /head 之 间 编 写 JavaScript 代码 来 实现 该 效果 ,代码 如 下 。 


证 <script type= "text/javascript"> 

芝 function chk (theForm) { 

3 if (theForm.admin name.value==""){ 
4 alert ("请 输入 账号 1"); 

5 theForm.admin name.focus(); 

6 return (false); 

时 } 

8 else if (theForm.admin pass.value==""){ 
9 alert ("请 输入 密码 !"); 

10 theForm.admin pass.focus(); 
11 return (false); 

12 jelsef 

13 return true; 

14 和 

15 } 


16 </script> 

在 上 述 代码 中 ,第 2 行 创建 自 定义 函数 ,函数 的 名 称 为 chk, 同 时 该 函数 有 一 个 形 参 
theForm, 第 3 一 14 行为 函数 体 的 内 容 , 可 以 对 账号 和 密码 进行 非 空 判断 。 

至 此 ,login. php 页 面 代码 编写 完毕 ,该 页 面 的 完整 代码 如 下 。 


1 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtml1/DTD/xhtmll- transitional .dtd"> 


4 <html xmlns= "http://www.w3.org/1999/xhtml"> 

是 <head> 

4 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
5 <title> 企 业 网 站 管理 系统 1.0< /title> 

6 <1ink href= "css/login.css" rel= "stylesheet" type= "text/css" /> 
4 < script type= "text/javascript"> 

8 function chk (theForm) { 

9 if (theForm.admin name.value==""){ 

10 alert ("请 输入 账号 1"); 

11 theForm.admin name.focus(); 

12 return (false); 

13 } 

4 else if (theForm.admin pass.value==""){ 

15 alert (" 请 输入 密码 1") 

16 theForm.admin pass.focus(); 

17 return (false); 
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</script> 
</head> 
<body> 
<div id= "main"> 
<div id= "wrapper"> 
< form action= "login check.php" method="Post" id="forml" onSubmit= "return chk( 
this)"> 
<div id="sys name"> 
<p> gnbsp;< /p> 
<p> gnbsp;< /p> 
<p> 企 业 网 站 管理 系统 < /p> 
</div> 
<ul id="cont"> 
<1i> 
<1label class= "lb" for= "uname"> 账 号 < /label> 
< input name="admin name" id="uname" type="text" class="ip" value= 
"" maxlength= "18" /> 
</li> 
<1i> 
<label class= "lb" for= "pwd"> 密 码 < /label> 
< input name= "admin pass" id="pwd" type= "password" class="ip" value="" 
maxlength= "10" /> 
</1i> 


<li><span> 
<input type= "image" src= "images/ente.png" title= "登录 系统 "/> 
</span></li> 
</ul> 
<P id= "copy">< /p> 
< /form> 
</div> 
</div> 
< /body> 
</html> 


2. 编写 数据 库 连接 文件 (conn. php) 

页 面 在 操作 数据 库 数据 之 前 ,首先 要 与 数据 库 建立 连接 ,并 选择 要 操作 的 数据 库 。 因 为 
在 后 续 的 模块 开发 中 ,大 部 分 页 面 需 操作 数据 库 的 数据 ,因此 ,把 连接 数据 库 的 代码 写 在 单 
独 的 文件 中 ,然后 使 用 require_once( ) 函 数 将 该 文件 引入 即 可 ,这 样 既 可 以 避免 代码 的 重复 
编写 ,又 提高 了 工作 效率 。 该 文件 编写 好 后 ,保存 在 www/web/inc 目录 中 。conn. php 文 
件 的 代码 如 下 。 
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// 创 建 数据 库 连 接 对 象 

1 $ conn=mysql connect ("localhost", "root", "123"); 
2 // 如 果 数 据 库 连接 对 象 创建 失败 , 抛 出 错误 信息 
3 if(!$ conn) 

4 { 

5 die('Could not connect:' .mysql error()); 

6 } 

7 // 选 择 要 操作 的 数据 库 对 象 

8 $ dbselect=mysql select db ("company",$ conn); 
9 // 如 果 数 据 库 选 择 失败 , 抛 出 错误 信息 

10 if(!$ dbselect) 

11 { 

12 die('Can\'t use DataBase:' .mysql error()); 
13 } 

14 ”// 设 置 编 码 为 utf8 

15 mysql_query ("set names utf8"); 


3. 编写 登录 验证 文件 (login_check. php) 

该 文件 主要 是 对 表单 页 面 (login. php) 提 交 过 来 的 账号 和 密码 进行 验证 , 若 在 数据 库 的 
admin 表 中 能 找到 与 提交 过 来 的 账号 和 密码 一 致 的 记录 , 则 使 用 session 存储 相关 信息 并 进 
入 网 站 的 后 台 , 否 则 提示 账号 或 密码 不 正确 并 返回 到 登录 页 面 。 该 文件 的 完整 代码 如 下 。 


1 


[3 


<?php session start();? > 
< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtmll/DTD/xhtml1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
</head> 
<body> 
<?php 
require once 'conn.php'; 
// 接 收 表单 传递 过 来 的 值 并 赋 给 相应 的 变量 Sadmin_ name 和 $admin pass 
$admin name=$_ POST['admin name']; 
$admin pass=$_POST['admin pass']; 
// 将 查询 语句 赋 给 变量 $ sql 
$sql="SELECT * FROM admin WHERE admin name='". Sadmin name."' and admin Pass= '".Sadmin 
Ta 
// 执 行 SQL 语句 ,并 将 结果 返回 给 $result 变量 。 实 际 上 ,返回 的 结果 是 一 个 数组 
$result=mysql query ($sq1); 
if ($result){ 
// 获 取 $ result 数组 中 记录 的 行 数 
$row=mysql_ num rows ($result); 
// 判 断 是 否 找到 相应 的 数据 记录 
if ($row>0) { 
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23 $_SESSION['ischecked']="ok"; 

24 $_SESSION['admin name']=$ POsST['admin name']; 

25 echo "< script > alert (' 登 录 成 功 !');window. location. href= ' index. php' 

ripgt> "sy 

26 exit; 

27 Jelse{ 

28 echo "< script > alert (' 你 的 账号 或 密码 不 正确 !');window. location. href= 
"login.php'< /script> "; 

29 exit; 

30 } 

31 1} 


32 ”// 关 闭 数据 库 连接 

3 mysql_close ($conn); 

34 和 

35 < /body> 

36 </htm> 

4. 编写 session 文件 (session. php) 

从 登录 验证 文件 (login_check. php) 分 析 可 知 ,在 输入 的 用 户 名 和 密码 均 正确 的 情况 下 ,在 
跳 转 到 网 站 后 台 之 前 ,执行 了 “ $_SESSION['ischecked"]=='ok'; ”和 *$_SESSION['zh"]==$ 
_POST['admin_name”]; "代码, 这样 做 有 什么 作用 呢 ? 

作用 一 : 传 值 ,在 进入 网 站 后 台 后 ,车 某 个 页 面 需 用 到 用 户 名 ,直接 使 用 * $ _SESSION 
[zh]” 代 码 便 可 取出 用 户 名 。 

作用 二 : 通常 用 于 用 户 身 份 认证 功能 ,通过 session 记录 用 户 的 有 关 信 息 , 以 供用 户 再 
次 以 此 身份 对 Web 服务 器 提供 要 求 时 做 出 确认 。 从 另 一 个 角度 来 看 ,也 可 以 理解 为 利用 
Session 的 这 种 特性 保护 后 台 文 件 的 访问 权限 。 如 果 没 有 Session 对 后 台 文件 的 访问 保护 ， 
那么 ,只 要 知道 路 径 就 可 以 访问 后 台 文件 , 那 是 一 件 非常 危险 的 事情 。 关 于 Session 的 知识 
请 见 该 任务 后 的 知识 讲解 。 

该 文件 (session. php) 完 整 的 代码 如 下 。 


< ?php 

session start (); 

if(empty($ _SESSION['zh']) && $ _SESSION['ischecked'] !='ok') { 
echo "<script >alert (' 请 不 要 非法 访问 !') ;window.location.href= 'login.php'</script>"; 
exit; 

} 

2 


以 上 代码 块 的 意义 是 : 如 果 $ _ SESSION ['zh'] 的 值 为 空 ,并 且 $ _ SESSION 
L'ischecked”] 的 值 不 等 于 ok, 则 弹出 提示 信息 并 返回 到 登录 页 面 login. php。 
【知识 讲解 】 


1. 登录 验证 原理 
登录 验证 模块 是 企业 网 站 后 台 的 入 口 ,管理 员 在 登录 页 面 输入 账号 和 密码 并 单 击 “ 提 
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交 ” 按 钮 后 ,验证 文件 将 接收 账号 和 密码 数据 进行 验证 。 如 果 输 入 的 账号 和 密码 无 误 , 则 进 


入 网 站 的 后 台 , 否 则 弹出 提示 信息 “温馨 提示 : 账号 或 密 
码 不 正确 !1”, 单 击 “ 确 定 ” 按 钮 后 重新 跳 转 至 登录 页 面 。 
该 模块 的 流程 图 如 图 6-9 所 示 。 1 


码 , 它 实现 了 对 账号 和 密码 的 非 空 验证 以 增强 用 户 的 体 
验 , 该 代码 写成 了 函数 形式 (函数 名 chk) ,因此 ,在 表单 
的 开始 标签 二 form 盖 中 加 入 代码 onSubmit= return chk Yes No 





进入 用 户 登 录 页 (login.php) 一 | 








输入 用 户 名 和 密码 








2. JavaScript 实现 非 空 验证 
login. php 文件 的 第 7 一 22 行 代码 为 JavaScript 代 












是 否 通过 验证 ? 
(login_check.php) 














ee [ae 
3. mysql_connect( ) 函数 


该 函数 用 于 打开 非 持久 的 MySQL 连接 ,如 果 连 接 6-9 


成 功 , 则 返回 一 个 MySQL 连接 标识 ;失败 则 返回 false。 


127. 


其 语法 格式 如 下 : 
mysql_connect (serverv,user,Pwd) 


参数 说 明 如 下 。 

server: 可 选 , 用 于 规定 连接 的 服务 器 ,如 MySQL Server 在 本 地 端 , 则 使 用 localhost 或 
加 人 

user: 可 选 ,服务 器 的 用 户 名 。 

pwd: 可 选 , 用 于 连接 服务 器 的 密码 。 

4. mysql_select_db( ) 函 数 

该 函数 用 于 设置 活动 的 MySQL 数据 库 , 也 可 以 理解 为 设置 要 操作 的 数据 库 对 象 。 如 


果 设 置 成 功 , 则 该 函数 返回 true; 如 果 设 置 失 败 , 则 返回 false。 


语法 的 格式 如 下 : 
mysql_select_db (database, connection) 


参数 说 明 如 下 。 

database: 必需 。 设 置 要 操作 的 数据 库 对 象 。 

connection: 可 选 。 用 于 规定 MySQL 连接 。 如 果 未 指定 , 则 使 用 上 一 个 连接 。 

5. mysql_query( ) 函 数 

该 函数 用 于 执行 MySQL 语句 ,执行 成 功 时 返回 true, 出 错时 返回 false。 

语法 格式 如 下 : 

mysql_query (query, connection) 

参数 说 明 如 下 。 

query: 必需 。 规 定 要 发 送 的 SQL 查询 。 

connection: 可 选 。 规 定 SQL 连接 标识 符 。 如 果 未 规定 , 则 使 用 上 一 个 打开 的 连接 。 

6. 超 全 局 变量 $_POST 和 $_GET 

PHP 中 的 许多 预定 义 变量 都 是 “ 超 全 局 的 ”, $ _POST 和 $_GET 是 其 中 的 两 个 ,它们 
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在 一 个 脚本 的 全 部 作用 域 中 都 可 用 。 
(1) $_POST 用 于 接收 表单 使 用 method 王 "post" 语 句 提交 的 数据 。 
例如 : 


< form action="" method= "post"> 
用 户 名 : < input type= "text" name= "user" /> 
<input type="submit" value= "提交 " /> 
< /form> 
你 的 用 户 名 是 : <?=$ _EosT['user']?> 
(2) $_GET 用 于 接收 表单 使 用 method= "get" 语句 提交 的 数据 。 
例如 : 


< form action="" method= "get"> 
年 龄 : < input type= "text" name= "age" /> 
<input type= "submit" value= "提交 " /> 
</form> 
你 的 用 户 名 是 : <?=$ _GET['age']?> 
7. mysql_fetch_array ( ) 函 数 
该 函数 用 于 从 结果 集 取得 的 行 生成 数组 ,如 果 没 有 取得 行 , 则 返回 false。 
语法 格式 如 下 : 


mysq]_fetch_array(datavarray type) 


参数 说 明 如 下 。 

data: 可 选 。 规 定 要 使 用 的 数据 指针 。 该 数据 指针 通常 是 mysql_query() 函数 产生 的 
结果 。 

array_type: 可 选 。 规 定 返回 哪 种 结果 。 可 能 的 值 如 下 。 

。 MYSQL_ASSOC: 关联 数组 。 

。 MYSQL_NUM: 数字 数组 。 

"MYSQL_BOTH: 默认 值 。 同 时 产生 关联 和 数字 数组 。 

8. session 、$ _session 和 session_start ( ) 

(1) session 

HTTP 协议 是 Web 服务 器 与 客户 端 (浏览 器 ) 相 互通 信 的 协议 , 它 是 一 种 无 状态 协议 。 
所 谓 无 状态 , 指 的 是 不 会 维护 HTTP 请 求 数据 .HTTP 请 求 是 独立 却 非 持久 的 。 而 越 来 越 
复杂 的 Web 应 用 需要 保存 一 些 用 户 状 态 信息 。 这 时 候 , Session 这 种 方案 应 需 而 生 。 
Session 是 一 个 很 抽象 的 概念 。 

当 每 个 用 户 访问 Web, PHP 的 Session 初始 化 函数 都 会 给 当前 来 访 用 户 分 配 一 个 唯一 
的 Session ID ,并 且 在 Session 生命 周期 结束 的 时 候 , 将 用 户 在 此 周期 产生 的 Session 数据 持 
续 到 Session 文件 中 。 用 户 再 次 访问 的 时 候 ,Session 初始 化 函数 ,又 会 从 Session 文件 中 读 
取 Session 数据 ,开始 新 的 Session 生命 周期 。 

(2) $ _session 

$ _session 是 一 个 全 局 变量 ,类 型 是 Array ,映射 了 Session 生命 周期 的 Session 数据 ， 
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寄存 在 内 存 中 。 在 Session 初始 化 的 时 候 . 从 Session 文件 中 读 取 数据 , 填 入 该 变量 中 。 在 
Session 生命 周期 结束 时 ,将 $_SESSION 数据 写 回 Session 文件 。 

(3) session_start( ) 

session_start( ) 函 数 会 开始 一 个 会 话 , 它 会 初始 化 Session, 也 表示 Session 生命 周期 的 
开始 。 要 使 用 Session, 必 须 初始 化 一 个 Session 环境 。 有 点 类 似 于 OOP 概念 中 调用 构造 函 
数 构建 对 象 实例 一 样 。Session 初始 化 操作 ,声明 一 个 全 局 数组 $ _SESSION, 映 射 寄存 在 
内 存 的 Session 数据 。 如 果 Session 文件 已 经 存在 ,并 且 保 存 有 Session 数据 ,session_start 
(0) 则 会 读 取 Session 数据 , 填 入 $_SESSION 中 ,开始 一 个 新 的 Session 生命 周期 。 

使 用 技巧 如 下 : 

在 调用 Session_Start() 之 前 不 能 有 任何 输出 。 若 较 多 的 页 面 使 用 Session, 则 可 以 直接 
修改 配置 文件 php. ini ,使 session. auto_start 王 1, 这 样 就 不 需要 在 使 用 Session 的 每 个 页 面 
中 加 入 session_start( ) 方 法 。 

9. require_once( ) 方 法 

require_once() 方 法 在 脚本 执行 期 间 包含 并 运行 指定 文件 (通俗 一 点 说 ,括号 内 的 文件 
会 执行 一 遍 )。 如 果 该 文件 中 的 代码 已 经 被 包含 了 , 则 不 会 再 次 包含 。 





6.3 开发 后 台 框 架 模块 


1. 确定 后 台 框架 结构 

后 台 框 架 主要 是 把 各 个 功能 模块 有 序 地 组 织 起 来 ,使 得 网 站 后 台 界 面 协调 美观 ,功能 的 
操作 简单 快捷 ,常用 的 后 台 框 架 结构 有 以 下 三 种 ,分 别 如 图 6-10 一 图 6-12 所 示 。 另 外 ,图 6-13 
显示 了 每 个 版 位 输出 文件 的 名 称 。 





left right 











图 6-10 


在 以 上 的 三 种 结构 中 ,left 版 位 用 于 显示 功能 操作 菜单 ,right 版 位 用 作 具 体 功 能 操作 
区 ,top 版 位 用 来 输出 网 站 Logo 或 后 台 名 称 ( 如 X X X 网 站 管理 系统 ),bottom 版 位 通常 用 
来 输出 版 权 类 的 信息 (如 设计 与 开发 : X xX XxX)。 
下 面 将 使 用 图 6-12 所 示 的 结构 进行 设计 开发 。 
2. 确定 在 每 个 版 位 输出 文件 的 名 称 
(1) 编写 框架 的 主体 文件 (index. php) ,完整 代码 如 下 。 
hx 
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图 6-11 





top 





left right 








bottom 





6-12 


top.php 


left.php right.php 





bottom.php 








图 6-13 


<?php 
session start(); 
require once('session.php'); 


ee 


ww Rb 


< ! DOCTYPE html PUBLIC "-- //W3C//DTD XHTML 1. 0 Frameset//EN" "http://www.w3.org/TRV 
xhtml1/DTD/xhtml1- frameset.dtd"> 

6 <html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

8 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
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33 


14 


15 


16 


24 


< link href= "css/main.css" rel= "stylesheet" type= "text/css"> 
<title> 企 业 网 站 管理 系统 < /title> 
</head> 
< frameset rows= "108, * ,30" cols="* " frameborder= "No" border= "0" framespacing 
="0"> 
< frame src="top.php" name="topFrame" scrolling="No" noresize="noresize" id=" 
topFrame" title="topFrame" /> 
< frameset rows="* " cols="190, * " framespacing="0" frameborder= "no" border 
一 "0"> 
<frame src= "left.Pphp" name= "leftFrame" scrolling= "auto" noresize= "noresize" id 
="]leftFrame" title= "leftFrame" /> 
< frame src="right. php" name ="mainFrame" scrolling="auto" noresize= 
"noresize" id= "mainFrame" title= "mainFrame" /> 
< /frameset> 
< frame src= "bottom.php" name= "bottomFrame" scrolling= "No" noresize= "noresize" id 
="bottomFrame" title= "bottomFrame" /> 
< /frameset> 
<noframes> 
<body> 
< /body> 
< /noframes> 
</html> 


上 述 代 码 利用 frameset 与 frame 将 页 面 分 割 成 4 个子 窗口 ,每 个 子 窗口 输出 相应 的 页 
面 并 构成 了 网 站 后 台 的 主体 结构 ,其 中 ,第 2 行 的 作用 是 开启 该 面 的 Session, 只 有 开启 了 ， 
第 3 行 引 入 的 文件 代码 才能 起 作用 : 防止 非法 用 户 登录 网 站 后 台 。 

上 述 代 码 第 13 行 ,第 15 行 .第 16 行 和 第 18 行 ,使 用 src 属性 分 别 引 入 了 文件 top. php、 
left. php\right. php、bottom. php。 

(2) 编写 top 子 窗口 文件 (top. php) ,完整 代码 如 下 。 


1 


D 


< ?php session start();?> 
< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtmll1/DTD/xhtmll-transitional.dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<title>< /title> 
<meta http- equiv= "Content— Type" content= "text/html; charset=utf- 8" /> 
<style type= "text/css"> 
body { 
margin- left: Opx; 
margin- top: Opx; 
margin- right: Opx; 
margin-— bottom: Opx; 
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20 


23 


28 


</style> 

</head> 

<body> 

< table width= "100% "border="0" cellpadding= "8" cellspacing= "0" align= 

center> 

<tr style= "background- image:url (images/top back.gif);"> 

< tdwidth= "36%" valign= "middle" style=" background: url (images/ 
logo_ left. png) no - repeat 10px center; font - size: 30px; height: 
60px"> gnbsp; < /td> 
<td width="64%" valign="bottom" align="right" style="color:# FFF; font- size: 
12px;"> 当 前 时 间 : < span id= "time"> 

<script> 

document .getElementById('time') .innerHTML= new Date () .toLocaleString()+ ' 星 期 '+ ' 日 一 

二 三 四 五 六 ' .charAt (new Date() .getDay ()); 

setInterval ("document .getElementById ('time') .innerHIML= new Date () .toLocaleString () 


+' 星 期 '+' 日 一 二 三 四 五 六 ' .charAt (new Date () .getDay ());",1000); 
</script>< /span>< /td> 
</tr> 


<tr style= "background- image:url (images/top bg.gif); height:16px;"> 
<td width="36%" style="color:# 000000; font- size:12px;"> 欢 迎 您 : < span style=" 
color:#F30;font— weight:600;">< 3php echo $ _SESSION['admin name']?> </span> ,您 现在 登 
录 的 是 企业 网 站 管理 系统 < /td> 
< td width="64%" align="right" style=" color:# 000000;" > < input type= 
"button" value= "退出" onclick="window. parent. location. href= ' loginout.php'" 
style= "margin- top:- 3px;height:21px;margin- right:5px;" />< /td> 
</tr> 
</table> 
</body> 
</html> 


上 述 代 码 的 第 9 行 ,通过 背景 的 方式 设置 了 网 站 后 台 的 标题 ,该 标题 是 通过 png 图 片 的 
方式 形成 的 。 应 注意 的 是 ,使 用 Photoshop 或 Fireworks 导出 图 片 前 ,应 将 背景 设置 为 透 
明 , 这 样 导 出 的 图 片 能 够 适应 任何 背景 颜色 。 

上 述 代码 的 第 20 一 24 行为 输出 当前 的 日 期 与 时 间 。 

上 述 代码 的 第 27 行 , 主 要 作用 是 输出 欢迎 信息 ,其 中 代码 “二 ? php echo $ _SESSION 
[Ladmin_name']? 二 ”为 输出 管理 员 的 账号 ,该 账号 信息 在 登录 验证 文件 login_check. php 
中 产生 ,该 Session 将 会 存活 并 能 输出 ,直至 销毁 。 

(3) 编写 left 子 窗口 的 菜单 文件 left. php 

该 文件 主要 用 采用 树 型 结构 来 组 织 网 站 后 台 功 能 菜单 ,因此 将 引入 用 于 实现 树 型 
结构 的 JavaScript 文件 dtree. js。 为 了 方便 后 面 的 开发 .现在 约定 每 个 功能 模块 的 文件 
名 称 , 并 在 实现 左 侧 功 能 菜单 时 ,把 模块 的 链接 地 址 也 写 上 ,功能 模块 的 文件 名 称 详细 


见 表 6-1。 
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表 6-1 
功能 模块 文件 名 称 说 明 

网 站 基本 配置 | config. php 设置 网 站 信息 
admin_add. php 添加 管理 员 信息 : 表单 页 面 文件 
admin_add_pass. php 添加 管理 员 信息 : 写 人 数据库 页 面 文件 
admin_list. php 查询 输出 管理 员 信息 列表 页 文件 

管理 呈 过 再 admin_modify. php 修改 管理 员 信息 : 显示 页 面 文件 
admin_modify_pass. php 修改 管理 员 信息 : 修改 数据 库 记 录 页 面 文件 
admin_delete. php 删除 管理 员 信息 页 面 文件 
single_add. php 添加 单 页 信息 : 表单 页 面 文件 
single_add_pass. php 添加 单 页 信息 : 写 人 数据 库 页 面 文件 
single_list. php 查询 输出 单 页 信息 列表 页 文件 

学 页 管理 single_modify. php 修改 单 页 信息 : 显示 页 面 文 件 
single_modify_pass. php 修改 单 页 信息 : 修改 数据 库 记 录 页 面 文件 
single_delete. php 删除 单 页 信息 页 面 文件 
article_add. php 添加 文章 信息 : 表单 页 面 文件 
article _add_pass. php 添加 文章 信息 : 写 人 数据 库 页 面 文件 
article _list. php 查询 输出 文章 信息 列表 页 文件 

文章 管 理 article _modify. php 修改 文章 信息 : 显示 页 面 文件 
article _modify_pass. php 修改 文章 信息 : 修改 数据 库 记 录 页 面 文件 
article _delete. php 删除 文章 信息 页 面 文件 
prodcue_add. php 添加 产品 信息 : 表单 页 面 文件 
prodcue _add_pass. php 添加 产品 信息 : 写 入 数据 库 页 面 文件 
prodcue _list. php 查询 输出 产品 信息 列表 页 文件 

这 再 prodcue _modify. php 修改 产品 信息 : 显示 页 面 文件 
prodcue _modify_pass. php 修改 产品 信息 : 修改 数据 库 记 录 页 面 文件 
prodcue _delete. php 删除 产品 信息 页 面 文件 
guestbook. php 查询 输出 留言 信息 列表 页 文件 

留言 管理 guestbook_deal. php 处 理 留言 信息 页 面 文 件 
geustbook_delete. php 删除 留言 信息 页 面 文件 
slide_add. php 添加 焦点 幻灯 信息 : 表单 页 面 文 件 
slide _add_pass. php 添加 焦点 幻灯 信息 : 写 入 数据 库 页 面 文件 
slide _list. php 查询 输出 焦点 幻灯 信息 列表 页 文件 

焦点 幻灯 管理 


slide _modify. php 


修改 焦点 幻灯 信息 : 显示 页 面 文件 





slide _modify_pass. php 


修改 焦点 幻灯 信息 : 修改 数据 库 记 录 页 面 文件 








slide _delete. php 





删除 焦点 幻灯 信息 页 面 文 件 
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续 表 
功能 模块 文件 名 称 说 明 
qq_add. php 添加 QQ 客服 信息 : 表单 页 面 文件 
qq _add_pass. php 添加 QQ 客服 信息 : 写 入 数据库 页 面 文件 
qq _list php 查询 输出 QQ 客服 信息 列表 页 文件 
i qq _modify. php 修改 QQ 客服 信息 : 显示 页 面 文件 
qq _modify_pass. php 修改 QQ 客服 信息 : 修改 数据 库 记 录 页 面 文件 
qq _delete. php 删除 QQ 客服 信息 页 面 文件 
friend_add. php 添加 QQ 客服 信息 : 表单 页 面 文 件 
friend _add_pass. php 添加 友情 链接 信息 : 写 入 数据 库 页 面 文件 
friend _list. php 查询 输出 友情 链接 信息 列表 页 文件 
克 撒 入 接管 尘 friend _modify. php 修改 友情 链接 信息 : 显示 页 面 文件 
friend _modify_pass. php 修改 友情 链接 信息 : 修改 数据 库 记 录 页 面 文件 
friend _delete. php 删除 友情 链接 信息 页 面 文件 
退出 后 台 loginout. php 退出 网 站 后 台 文件 


在 明确 各 功能 模块 文件 名 称 的 情况 下 编写 left. php 文件 ,完整 代码 如 下 。 


1 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TRV 


xhtmll1/DTD/xhtmll- transitional .dtd"> 


2 <html xmlns= "http://www.w3.org/1999/xhtml"> 
3 <head> 

4 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
5 <title>< /title> 

6 <style type= "text/css"> 

了 六 汪 

8 body { 

9 margin- left: Opx; 

10 margin- top: Opx; 

11 background- color: #ecf4ff; 

12 } 

3 .dtree { 

14 font- family: Verdana, Geneva, Arial, Helvetica, sans- serif; 
5 font- size: 12px; 

16 color: #0000ff; 

17 white- space: nowrap; 

18 E 

9 .dtree img { 

20 border: Opx; 

21 Vertical-align: middle; 

22 $ 

23 .dtreeaf{ 

24 color: #333; 
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text— decoration: none; 


.dtree a.node, .dtree a.nodeSel { 
white- space: nowrap; 
padding: 1px 2px 1px 2px; 


.dtree a.node:hover, .dtree a.nodeSel:hover { 
color: #0000ff; 


.dtree a.nodeSel { 
background- color: #AEDOF4; 


.dtree.clip { 
overflow: hidden; 


</style> 
<link href="css/main.css" rel="stylesheet" type= "text/css"> 
< script type= "text/javascript" src="js/dtree.js"></script> 


<table width= "96% "border= "0" cellpadding= "10" cellspacing= "0" align= center > 


<td valign= "top" > 


<div class=menu> 
<table width= "100% "border= "0" cellpadding= "0" cellspacing= "0"> 


<tr> 
< td height= 25> < a href= "javascript: d.openAll ();"> < img src= 
"images/view_ detailed. gif" width="15" height="15" border="0" 
align= "absmiddle" alt= "展开 列表 ">< /a><a href="javascript: d. 
closeAll();"> < img src= "images/view tree.gif" width= "15" height 
"15" border= "0" align= "absmiddle" alt= "收缩 列表 "> < /a> < a href 
= "right.php" target= "mainFrame"> 系统 首页 </a> | <a href="../" 
target= "blank"> 网 站 首页 < /a>< /td> 








</tr> 
<tr> 


<td> 


< script type= "text/javascript"> 

<!-- 

d=new dTree('d'); 

d.config.target= "mainFrame"; 

qd.add (0,-1,' 系 统 内 容 管理 ') ; 

qd.add(1, 0, ' 网 站 基本 配置 '，''); 

qd.adqd(11, 1, "设置 网 站 信息 '，'config.php'); 
d.adqd(2, 0, ' 管 理 员 管理 ',，''); 
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64 d.add(21，2，" 添 加 管理 员 '，'admin add.php'"); 
65 aq.add(22，2，" 管 理 员 列表 '，'"admin list.php'); 
66 d-.adqd (3, 0, ' 单 页 管理 ',，'' 

67 d.add(31，3，"' 添 加 单 页 '，"single addq.php'")7 

68 d.add(32，3，" 单 页 列表 '，'"single list.php'); 
69 d.aqd (4, 0,' 文 章 管理 '，''); 

70 d.add(41，4，" 添 加 文章 '，'article add.php'); 
71 d.add(42，4，" 文 章 列表 '，'article list.php'); 
72 d.add(5，0，"' 产 品 管理 "'，' ") 7 

73 d.add(51，5，" 添 加 产品 '，'"produce add.php"); 
74 d.add(52，5，" 产 品 列表 '，"produce list.php'); 
75 d.add(6, 0，" 留 言 管理 "'，' ") 7 

76 d.add (61, 6,' 留 言 列表 '，'guestbook.php'); 

I qd.add (7, 0, "焦点 幻灯 管理 ',，''); 

78 qd.add (71, 7, ' 添 加 焦点 幻灯 '，'slide_ add.php'); 
79 qd.add (72, 7, "焦点 幻灯 列表 '，'slide_ list.php'); 
80 qd.adqd (8, 0,'QQ 客 服 管理 '，''); 

81 d.add (81,8,' 添 加 客服 '，'qq_add.php'); 

82 qd.add (82,，8,' 客 服 列表 '，'qq_list.php'); 

83 d.add (9, 0,' 友 情 链接 管理 '，''); 

84 d.add (91,9,' 添 加 友情 链接 '，'friend add.php'); 
85 d.add(92，9，" 友 情 链 接 列表 '，'friend list.php'); 
86 d.add (10, 0,' 退 出 系统 '，''); 

87 qd.agd (101, 10, ' 退 出 '，'loginout .php'); 

88 document .write (d); 

89 A=¥ 

90 </script> 

91 </td> 

92 </tr> 

93 < /table> 

94 </div> 

95 </td> 

96 </tr> 

97 </table> 

98 </body> 


99 </html> 


(4) 编写 right 子 窗口 的 欢迎 界面 文件 right. php 
该 文件 通常 用 来 显示 欢迎 信息 、 系 统 简 介 信 息 、 程 序 说 明 信 息 等 ,编者 将 用 于 输出 系统 
简介 信息 和 程序 说 明 信 息 。 该 文件 完整 的 代码 如 下 。 


1 < ?php session start ();?> 

2 < ldoctype html public "- //w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/ 
xhtmll/dtd/xhtmll1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/V1999/xhtml"> 
<head> 
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<meta http- equiv= "content— type" content="text/html; charset=utf- 8" /> 


< link rel= stylesheet type=text/css href= "css/right .css"> 
<title> 无 标题 文档 < /title> 
<style type= "text/css"> 
body { 
background- color: #eef2fb; margin: Opx 
} 
tadl{ 
font- family: arial, helvetica, sans- serif; font- size: 12px 
} 
table southidc { 
background- color: #c66800; margin- bottom: Spx 
, 
.tr_southidc { 
background- color: # ecf5ff 
§ 
</style> 
</head> 
<body> 
<table border="0" cellspacing= "0" cellpadding= "0" width="100% "> 
<tbody> 
<tr> 
<td vali 





<td valign= "top" background= "images/content— bg.gif"> 


"top" background= "images/mail leftbg.gif" width= "17">< img 
src= "images/left- top- right .gif" width= "17" height= "29">< /td> 


<table jd- "table2" class= "left_ topbg" border="0" cellspacing="0" cellpadding 


="0" 
width="100%" height= 31> 
<tbody> 
<tr> 
<td height= "31"> 


<div class= "titlebt"> 欢 迎 界面 < /div> < /td> < /tr> < /tbody> < /table> 


</td> 


<td valign= "top" background= "images/mail rightbg.gif" width="16">< img 


src= "images/nav- right-bg.gif" width= "16" height= "29">< /td>< /tr> 


<tr> 


<td valign= "center" background= "images/mail leftbg.gif"> snbsp;< /td> 


<td bgcolor= "# £7f8f9" valign= "top"> 


<table border="0" cellspacing= "0" cellpadding= "0" width= "98% " align= "center" 


<tbody> 
> 
<td valign= "top" colspan= "2"> gnbsp;< /td> 
<td width="7%$ "> gnbsp;< /td> 
<td valign= "top" width="40% "> gnbsp;< /td>< /tr> 
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专人 


<td valign= "top" colspan= "4"> <p>< span 
class= "left bt"> 感 谢 您 使 用 企业 网 站 管理 系统 < /span><br><br> 
<span 
class= "left txt"> gnbsp;<img src= "images/ts.gif" width="16" 
height="16"> 
提示 : <br> 
&nbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; gnbsp; 您 现在 使 用 的 是 企业 网 站 管 
理 系统 !< /span>< span 
class=left_ txt><br> 
snbsp; snbsp; gnbsp; gnbsp; gnbsp; gnbsp; 该 系统 使 用 方便 ,操作 简单 ,只 需 
会 打字 、 会 上 网 ,就 能 够 理 网 站 内 容 !<br> 
&nbsp; &nbsp; gnbsp; gnbsp; gnbsp; 企 业 网 站 管理 系统 是 您 建立 中 小 型 企业 
网 站 的 首选 方案 ! 该 系统 源 代码 整套 出 售 ,有 意 者 请 联系 qq: 382526903</ 
span>< /p> 
<p><span 
class=left txt><br> 


</span></p></td></tr> 
<tr> 


<td colspan="4"> 


< !--html 部 分 --> 
</td></tr> 
<tr> 


<td height= "40" colspan= "4"> 
< table class= "line table" border= "0" cellspacing= "0" cellpadding=" 
Onm 
width="100%" height="205"> 
<tbody> 
<tr> 
<td class= "left bt2" height="27" 
background= "images/news-title-bg.gif" 
width= "31%$ "> gnbsp; snbsp;&nbsp; 程 序 说 明 < /td> 
<td class= "left bt2" background= "images/news- title- bg. 
gif™ 
width="69% ">< /td>< /tr> 
<tr> 
<td height= "102" valign="top" colspan= "2"> 
<table width= "95% " height= "153" border= "0" 
align= "center" cellpadding= "2" cellspacing="1"> 
<tbody> 
去 
<td height="23" width="48% "> 用 户 名 : <?=$S_SESSION [" 
admin name"]?></td> 
<td width= "52$"> ip: <3=$ _SERVER['REMOTE ADDR']?> </td 
></tr> 
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86 
87 
88 
89 
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93 
94 
95 


96 
97 


98 


99 
100 


101 
102 
103 
104 
105 
106 
107 
108 
109 
110 
111 
112 
113 
114 
115 
116 


<tr> 
< td height="23" width="48%"> 身 份 过 期 : <?= ini get 
("session.gc maxlifetime')?></td> 
<td width="52%$ "> 现在 时 间 : < ?php 
date default timezone set('prc'); 
echo date ("y-m- d h:i:s"); 


2></td></tr> 
<tr> 
<td height="23" width="48% "> 服务 器 域名 : < ?=$_SERVER ["HTTP 
_HOST"]?>< /td> 
<td width="52% "> 脚本 解释 引擎 : < ?=$_SERVER['SERVER_SOFTWARE 
?></td>< /tr> 
<tr> 
<td height="23"> 获 取 EHP 运行 方式 :<2-Fhp sapi nere()?></to> 
<td> 浏 览 器 版 本 : <?=$_SERVER[HTTP_USER _AGENT]?></td></tr 
> 
<tr> 
<td height="23"> 服 务 器 端口 : <?=$_SERVER['SERVER_PORT']?></ 
td> 
<td> 系 统 类 型 及 版 本 号 : <?= php_uname ()?></td></tr> 
</tbody>< /table></td>< /tr> 
<tr> 
<td height="5" colspan= "2"> gnbsp;< /td>< /tr>< /tbody>< /table>< /td></ 
tey> 
<tr> 


<td width="2% "> gnbsp;< /td> 
<td class="left txt" width="51%"></a><br> 
<td> gnbsp;< /td> 
<td> gnbsp;< /td> < /tr>< /tbody>< /table>< /td> 
<td background= "images/mail rightbg.gif"> gnbsp;</td></tr> 
<tr> 
<td valign= "bottom" background= "images/mail leftbg.gif"><img 
src="images/buttom left2.gif" width="17" height="17"></td> 
<td background= "images/buttom bgs.gif">< img 
src="images/buttom bgs.gif" width="17" height="17">< /td> 
<td valign= "bottom" background= "images/mail rightbg.gif"><img 
src="images/buttom right2.gif" width= "16" 
height= "17"></td></tr>< /tbody>< /table> 
< /body> 
</html> 


(5) 编写 bottom 子 窗口 的 底部 文件 bottom. php 
该 文件 通常 用 于 输出 版 权 类 的 信息 ,该 文件 的 完整 代码 如 下 。 


< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 
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2 <html xmlns= "http://www-w3-org/1999/xhtmln> 

3 <head> 

4 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

对 <title><%=sysInfos >< /title> 

6 <style type= "text/css"> 

法 body {margin: Opx;} 

8 td {font- size:12px;color:# 000;font- family: Helvetica, sans- serif, "宋体 ";} 

9 </style> 

10 </head> 

11 <body> 

12 <table width="]00%" height="30" border= "0" cellpadding="0" cellspacing= 

13 <tr> 

14 < td align= "center" background= "images/bottom bg.gif"> Copyright &copy; 林 龙 健 
2016- 2018 All Rights Reserved.</td> 

15 </tr> 

16 </table> 

17 < /body> 


18 </html> 


至 此 ,网 站 框架 模块 开发 完毕 ,效果 如 图 6-14 所 示 。 




















从 t+ 
企业 网 站 管理 系统 
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局 志和 首页 IN 首页 -区 三 轩 南 日 
Re 
让 量 玉 | 
ee 感 让 使 用 企业 网 站 埋 理 系统 
让 Far: 
向 文章 和 
OR 你 在 人 有 是 个 1 上 Fe 管 理 1 
se 人 方便 拓 人 阐 间 ， 只 村主 条 字 ， 全 上河， 就 和 刻本 3 六 和: 
和 FS 入 六 旭 让 HE 得 坑 该 全 下: 千 ， 有 间 清 有 DD1 33252690 
向 已 友情 按时 
向 
[2 

ME: adnin IP: 127004 

a 1440 信 才 局 : 201605 4603723 

服务 器 域名 : 127 0.0.18080 村 不 衣 竺 引 芝 :apache1228 (Win32) PHPI6 00-dev 

了 EIR: Netof5 0 (nindowe NT 6.1) pploWobidte27 36 
WPHPG 方 式 :apache hondier (KHTHL, ike Gecko) Chromej145.0.2454.101 Safar/537.35 
J 和: 9099 RAR: Vindows NT IIZBRUHEDC2C 8 1 boild 7600 








Copyrght 昌 林 太 健 2016-2010 Al Rights Resened 








图 6-14 


【知识 讲解 】 
1.。frameset 与 frame 知识 


frameset 与 frame 知识 是 网 页 开发 必须 掌握 的 知识 ,例如 在 后 台 架 构 、 局 部 刷新 、 页 面 
分 割 方面 都 有 应 用 。 
(1) frameset 


frameset 具有 以 下 属性 。 
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@ border: 设置 框架 的 边框 粗细 。 

@ bordercolor: 设置 框架 的 边框 颜色 。 

@ frameborder: 设置 是 否 显示 框架 边框 。 设 定 值 只 有 0、1,0 表示 不 要 边框 ,1 表示 要 
显示 边框 。 

图 cols: 纵向 分 割 页 面 。 其 数值 表示 方法 有 三 种 : 30% .30( 或 者 30px)、* 。 数 值 的 个 
数 代表 分 成 的 视窗 数目 且 数 值 之 间 用 ".” 隔 开 .“30%% ?表示 该 框架 区 域 占 全 部 浏览 器 页 面 
区 域 的 30%;*30” 表 示 该 区 域 横向 宽度 为 30 像素 ;" x* ”表示 该 区 域 占用 余下 的 页 面 空间 。 
例如 ,“cols 二 "25% ,200, *"” 表 示 将 页 面 分 为 三 部 分 ,左面 部 分 占 页 面 的 30% ,中 间 横 向 宽 
度 为 200 像素 ,页 面 余下 的 作为 右面 部 分 。 

加 rows: 横向 分 割 页 面 。 数 值 表示 方法 和 意义 与 cols 相同 。 

@ framespacing: 设置 框架 与 框架 间 保 留 的 空白 距离 。 

【 例 1 


<frameset cols= "213, * " frameborder= "no" border= "0" framespacing= "0"> 


以 上 代码 中 ,使 用 cols 属性 纵向 分 割 了 左右 两 个 子 窗口 ,其 中 ,左边 子 窗口 的 宽度 为 
213, 余 下 的 宽度 为 右边 子 窗口 的 宽度 。 
【 例 2】 


<frameset cols="40%, * ,* "> 


上 述 代 码 的 意思 是 : 第 一 个 框架 占 整个 浏览 器 窗口 的 40%, 剩 下 的 空间 平均 分 配给 另 
外 两 个 框架 。 
(2) Frame 
Frame 具有 以 下 的 属性 。 
OO name: 设置 框架 的 名 称 。 这 是 必须 要 设置 的 属性 。 
@ src: 设置 此 框架 要 显示 的 网 页 名 称 或 路 径 。 此 为 必须 设置 的 属性 。 
@ scrolling: 设置 是 否 要 显示 滚动 条 。 设 定 值 为 auto .yes、no。 
图 bordercolor: 设置 框架 边框 的 颜色 。 
@ frameborder: 设置 是 否 显示 框架 边框 。 设 定 值 只 有 0、1.0 表示 不 要 边框 ,1 表示 要 
显示 边框 。 
@ noresize: 设置 框架 大 小 是 否 能 手动 调节 。 
@ marginwidth: 设置 框架 边界 和 其 中 内 容 之 间 的 宽度 。 
marginhight: 设置 框架 边界 和 其 中 内 容 之 间 的 高 度 。 
@ width: 设置 框架 宽度 。 
四 height: 设置 框架 高 度 。 
(3) iframe 
iframe 是 浮动 的 框架 (frame) ,其 常用 属性 与 frame 类 似 。 它 具有 以 下 属性 。 
@ align: 设置 垂直 或 水 平 对 齐 方式 。 
@ allowTransparency: 设置 或 获取 对 象 是 否 可 以 透明 。 
例如 : 
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<iframe name="123" align= "middle" marginwidth="0" marginheight=0 src="" frameborder="0" 
scrolling= "no" width= "776" height= "2500">< /iframe> 


节 注 意 : iframe 标签 与 frameset、 frame 标签 的 验证 方法 不 同 , 是 XHTML 1. 0 
Transitional。 且 iframe 是 放 在 body 标签 之 内 ,而 frameset .frame 是 放 在 body 标签 之 外 。 
(4) 综合 示例 


<htm> 

<head> 

<title> 综 合 示 例 < /title> 

< /head> 

<frameset cols="25%, * "> 

< frame src="menu.htm" scrolling= "no" name= "Left"> 
< frame src= "pagel.htm" scrolling= "auto" name= "Main"> 
<noframes> 

<body> 

<p> 对 不 起 ,您 的 浏览 器 不 支持 “框架 ” !< /p> 

< /body> 

< /noframes> 

< /frameset> 

</html> 


说 明 : 二 noframes 二 一 /noframes 二 标志 对 也 是 放 在 二 frameset 二 一 /frameset 二 标志 对 
之 间 , 用 来 在 那些 不 支持 框架 的 浏览 器 中 显示 文本 或 图 像 信 息 。 在 此 标志 对 之 间 先 紧 跟 
一 body 二 一 /body 标 志 对 ,然后 才 可 以 使 用 熟悉 的 任何 标志 。 

2. PHP 中 $_SERVER 的 详细 参数 与 说 明 

PHP 编程 中 经 常 需要 输出 服务 器 的 一 些 资料 , 表 6-2 为 $_SERVER 的 详细 参数 。 

表 6-2 



































参 数 说 明 
$ _SERVER['PHP_SELF] 当前 正在 执行 脚本 的 文件 名 ,与 document root 相关 
$ _SERVER['argv'] 传递 给 该 脚本 的 参数 
a 二 
$ _SERVER['arge'] 包含 传递 给 程序 的 命令 行 参 数 的 个 数 (如 果 运 行 在 命令 
行 模式 ) 

$_SERVERLGATEWAY_INTERFACEI]] 服务 器 使 用 的 CGI 规范 的 版 本 。 例 如 CGI/1.1 
$$_SERVER[SERVER_NAMEI] 当前 运行 脚本 所 在 服务 器 主机 的 名 称 
$_SERVER[SERVER_SOFTWAREI]] 服务 器 标识 的 字 串 ,在 响应 请 求 时 的 头 部 中 给 出 
$ _SERVER[L'SERVER_PROTOCOL] 请 求 页 面 时 通信 协议 的 名 称 和 版 本 。 例 如 HTTP/1.0 

访问 页 面 时 的 请 求 方法 。 例 如 GET、HEAD， 
$_SERVERL'REQUEST_METHOD] POST PEt 
$_SERVER[IQUERY_STRING] 查询 (query) 的 字符 串 
$_SERVERLDOCUMENT ROOTI a 的 文档 根 目录 。 在 服务 器 配置 文件 
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续 表 





参 数 


说 明 





$_SERVERLHTTP_ACCEPTI 


当前 请 求 的 “Accept:” 头 部 的 内 容 





$_SERVERL'HTTP_ACCEPT_CHARSET'] 


当前 请 求 的 “Accept-Charset: ” 头 部 的 内 容 。 例 如 ,“iso- 
8859-1, * ,utf-8” 





$ _SERVER['HTTP_ACCEPT_ENCODING] 


当前 请 求 的 “Accept-Encoding: ” 头 部 的 内 容 。 例 如 gzip 





$_SERVER['HTTP_ACCEPT_LANGUAGE’] 


当前 请 求 的 “Accept-Language: ” 头 部 的 内 容 。 例 如 en 





$ _SERVER['HTTP_CONNECTION] 


当前 请 求 的 “Connection: ” 头 部 的 内 容 例如 
Keep-Alive 





$_SERVERLHTTP_HOSTI 


当前 请 求 的 "Host: ” 头 部 的 内 容 





$_SERVER['HTTP_REFERER'] 


链接 到 当前 页 面 的 前 一 页 面 的 URL 地址 





$_SERVER[L'HTTP_USER_AGENT"] 


当前 请 求 的 “User-Agent: ” 头 部 的 内 容 





$_SERVER['HTTPS]] 


如 果 通过 HTTPS 访问 , 则 被 设 为 一 个 非 空 的 值 (on) , 否 
则 返回 off 























$_SERVERLREMOTE_ADDR] 正在 浏览 当前 页 面 用 户 的 IP 地 址 
$_SERVER[REMOTE_HOSTI 正在 浏览 当前 页 面 用 户 的 主机 名 
$_SERVER['REMOTE_PORT'] 用 户 连 接 到 服务 器 时 所 使 用 的 端口 
$_SERVER['SCRIPT_FILENAME'] 当前 执行 脚本 的 绝对 路 径 名 
$_SERVER['SERVER_ADMIN'] 管理 员 信息 
$_SERVER['SERVER_PORT] 服务 器 所 使 用 的 端口 
$_SERVER['SERVER_SIGNATURE'] 包含 服务 器 版 本 和 虚拟 主机 名 的 字符 串 





$_SERVERLPATH_TRANSLATED] 


当前 脚本 所 在 文件 系统 (不 是 文档 根 目录 ) 的 基本 路 径 





$_SERVERLSCRIPT_NAME] 


包含 当前 脚本 的 路 径 。 这 在 页 面 需要 指向 自己 时 非常 
有 用 





$_SERVERLREQUEST_URI] 





访问 此 页 面 所 需 的 URI。 例 如 “Vindex. html” 


64 开发 网 站 基本 配置 模块 


该 模块 主要 用 于 设置 网 站 的 基本 信息 ,编辑 好 配置 信息 后 只 需 单 击 * 保 存 ? 按 钮 , 即 可 把 
信息 保存 在 数据 库 中 ,因此 ,在 数据 表 config 中 只 存在 一 条 数据 记录 ,开发 该 模块 前 应 先 在 


数据 表 config 中 创建 一 条 记录 。 


该 模块 文件 config. php 完整 的 代码 如 下 。 


<?php 


aoamwnb pr 


S% 


require once('session.php'); 
require once('../inc/conn.php'); 
$sql="SELECT * FROM config"™"; 
$result=mysql query($ sql); 
$=mysql fetch array($ result); 
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8 < !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www-w3.org/TR/ 
xhtml1/DTD/xhtml1- transitional.dtd"> 
9 <html xmlns= "http://www-w3-org/1999/xhtml"> 


10 <head> 

11 <meta http- equiv= "Content- Type" content="text/html; charset=utf- 8" /> 
12 ”<title> 无 标题 文档 < /title> 

33 <link href="css/table.css" rel= "stylesheet" type= "text/css" /> 

14 <link rel="stylesheet" href= "kindeditor/themes/default/default .css" /> 
15 < script charset= "utf- 8" src="kindeditor/kindeditor-min.js"></script> 
16 <script charset="utf- 8" src="kindeditor/lang/zh CN.js"></script> 

17 <script> 

18 Var editor; 

19 KindEditor.ready (function (K) 


20 { 

21 Var editor=K.editor ({ 

22 allowFileManager: true 

23 Ds; 

24 // 上 传 网 站 Logo 

25 K('#image3') .click (function() { 

26 editor.loadPlugin('image', function() { 
2 editor.plugin.imageDialog ({ 

28 showRemote: false, 

29 imageUrl: K("# site logo") .val(), 
30 clickEn: function (url, title, width, height, border, align) { 
31 K('#site logo') .val (url); 
32 editor .hideDialog(); 

33 } 

34 D); 

35 Ds; 

36 D); 

E74 // 上 传 公司 二 维 码 

38 K('#image4') .click (function() { 

39 editor.loadPlugin('image', function() { 
40 editor.plugin.imageDialog ({ 

41 showRemote: false, 

42 imageUrl: K('#company ewm') .val (), 
43 clickEn: function(url, title, width, height, border, align) { 
44 K('#company _ewm'") .val (url); 

45 editor.hideDialog (); 

46 } 

47 ]) 

48 D); 

49 Ds; 

50 1); 


51 </script> 
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</head> 


<body> 
< form id= "forml" name= "forml" method= "post" action= "config.php?act= save"> 


<table width= "100% " border="1" cellspacing="0" cellpadding= "0"> 
<tr> 
<td height="35" colspan= "3" class= "tt"> 网 站 基础 配置 < /td> 
</tr> 
<tr> 
<td width="16%" height="33"> 网 站 标题 : < /td> 
<td colspan="2">< label for="site title"></label> 
<input name= "site title" type= "text" id="site title" value="< ?php echo $ rs[' 
site title']?>" size="40" />< /td> 
</tr> 
<tr> 
<td height="33"> 网 站 logo< /td> 
<td colspan= "2">< input name= "site logo" type="text" id="site logo" value=" 
<?php echo $ rs['site logo'];?>" size="40" /> 
< input type= "button" id= "image3" value=" 上 传 " />< /td> 
</tr> 
<tr> 
<td height="33"> 公 司 二 维 码 < /td> 
<td colspan= "2">< input name= "company ewm" type= "text" id="company ewm" Value 
="< ?php echo $ rs['company ewm'];?>" size="40" /> 
<input type= "button" id="image4" value= "上 传 " />< /td> 
</tr> 
<tr> 
<td height="32"> 网 站 地 址 : < /td> 
<td width="53%">< input name= "site url" type= "text" id="site url" value="<? 
Php echo $ rs['site url']?>" size="40" /> 
</tr> 
<tr> 
<td height= "64"> 网 站 关键 字 : < /td> 
<td>< textarea name= "site keywords" cols="60" rows="3" id= "site keywords"><? 
Php echo $ rs['site keywords']?>< /textarea>< /td> 
</tr> 
<tr> 
<tqd height="61"> 网 站 描述 : < /td> 
< td> < textarea name="site description" cols="60" rows="3" id="site_ 
description"><?php echo $ rs['site description']?>< /textarea>< /td> 
</tr> 
<tr> 
<td height= "62"> 底 部 版 权 信息 (支持 html 标记 ): < /td> 
< td colspan= "2"> < textarea name= "site copyright" cols= "60" rows= "3" 


id= "site copyright"> <?php echo $ rs['site copyright']?>< /textarea 
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>< /td> 
</tr> 
<tr> 
<td height="32"> 公 司 名 称 < /td> 
<td colspan="2">< label for="company name">< /label> 
< input name= "company_ name" type= "text" id= "company name" value= 
"< ?php echo $ rs['company name']?>" size="40" />< /td> 
</tr> 
<tr> 
<td height="31"> 联 系 电话 < /td> 
<td colspan= "2"> < input name= "company phone" type= "text" id="company phone" 
value= "< ?php echo $ rs['company phone']?>" size="40" />< /td> 
</tr> 
<tr> 
<td height="31"> 传 真 < /td> 
<td colspan="2"> < input name= "company fax" type= "text" id= "company fax" value 
="< ?Php echo $ rs['company fax']?>" size="40" /></td> 
</tr> 
<tr> 
<td height="28"> 电 子 邮 箱 < /td> 
<td colspan= "2"> < input name= "company email" type="text" id="company email" 
Value="< ?php echo $ rs['company email']?>" size="40" />< /td> 
</tr> 
<tr> 
<td height= "28"> 微 信 < /td> 
<td colspan= "2"> < input name= "company weixin" type= "text" id= " 
company_ weixin" value= "< ? php echo $ rs['company weixin']?>" 
size= "40" /> < /td> 
</tr> 
<tr> 
<td height= "33"> 公 司 地 址 < /td> 
<td colspan= "2">< label for="company address">< /label> 
<input name= "company address" type= "text" id="company address" value="<?php 
echo $ rs['company address']?>" size="80" /></td> 
</tr> 
<tr> 
<td height="32" colspan="3"> < input type="submit" name="Submit" value=" 修 
改 ” /></td> 
< /tr> 
</table> 


</form> 


</body> 
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</html> 

<?2php 

if($_GET['act']=="save") { 

mysql query ("UPDATE config set site title='".$ POsT['site title']."',site url="'".$_ 
PosT['site url']."',site logo='".$ POST['site logo']."',company ewm="'".$ POST[' 
company ewm']."',site keywords="".$ POST['site keywords']."',site description="". 
$_POsST['site description']."', site copyright= '".$ POsT['site copyright']."', 
company name- '".$_POST['company name']."',company Phone="".$_POST['company phone 
'].""',company fax="'".$_POST ["company fax']."',company email="'".$_ POST['company_ 
email']."',company weixin='".$_POST['company weixin']."',company address='".$_POST 
['company address']."'",$ conn); 

echo "< script>alert ("修改 成 功 !') ;window.location.href= 'config.php';< /script>"; 
exit; 

} 

mysql_close($ conn); 


站 


上 述 代码 中 ,第 13 行为 后 台 功 能 操作 页 调用 的 CSS 文件 ;第 14 一 16 行为 调用 编辑 器 
所 需 的 CSS 文 件 和 JavaScript 文件 ;第 17 一 51 行为 调用 编辑 器 的 上 传 功能 实现 网 站 Logo 
上 传 和 公司 二 维 码 上 传 ;第 126 一 133 行 代码 的 意义 是 实现 网 站 基本 信息 的 数据 库 记 录 修 改 
功能 ;127 行使 用 了 条 件 语句 判断 在 什么 情况 下 才 执行 修改 代码 。 

该 模块 的 效果 图 如 图 6-15 所 示 。 





























网 站 基础 本 加 

网 站 标 题 : PPDo000C5DDD0000C( 肌 限 估 司 

网站 Logo [aecavedmvkneeditoyartachedimage/2016( [上 传 ] 
公司 二 维 友 iaocailadmiukindedioryartached/image/2016C [LE 本 | 
网 站 地 址 : [pwwwxeeoooooeooccm | 

网 站 关键 字 ， By 

Ee 22 

属 各 版 权 息 (支持 HTNIL 标志 ) 让 

公司 名 秘 PD000000000D0000XK 各 限 公司 

联系 电话 [om | 

仿真 [oo | 

电子 时 入 rammymay@is3com | 

bE crsammy168 

公司 地 直 广东 埋 高 州 市 700000000DDO000OOODDD 

区 3 








图 6-15 
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【知识 讲解 】 


1. 关于 在 线 编辑 器 

在 线 编辑 器 是 一 种 通过 浏览 器 等 来 对 文字 、 图 片 等 内 容 进行 在 线 编辑 修改 的 工具 。 一 
般 所 指 的 在 线 编辑 器 是 指 HTML 编辑 器 。 

在 线 编辑 器 用 来 对 网 页 等 内 容 进行 在 线 编辑 修改 ,让 用 户 在 网 站 上 获得 “所 见 即 所 得 ” 
的 效果 ,所 以 较 多 用 来 做 网 站 内 容 信息 的 编辑 .发布 及 在 线 文 档 的 共享 等 ,比如 新 闻 、 博 客 发 
布 等 。 由 于 其 简单 易 用 ,被 网 站 广泛 使 用 ,为 众多 网 民 所 熟悉 。 比 如 百度 百科 的 词 条 创建 、 
修改 的 过 程 中 ,使 用 的 就 是 在 线 编辑 器 。 

一 般 在 线 编辑 器 都 具有 三 种 模式 : 编辑 模式 代码 模 式 和 预览 模式 。 编 辑 模式 让 用 户 
可 以 进行 文本 、 图 片 等 内 容 的 增加 、 删 除 和 修改 操作 。 代 码 模 式 用 于 专业 技术 人 员 来 查看 和 
修改 原始 代码 (如 HTML 代码 等 )。 预 览 模式 则 是 用 来 查看 最 终 的 编辑 效果 。 

在 线 编辑 器 一 般 具有 如 下 的 基本 功能 : 文字 的 增加 、 删 除 和 修改 ;文字 格式 (如 字体 、 大 
小 颜色 、 样 式 等 ) 的 增加 、 删 除 和 修改 ;表格 的 插入 和 编辑 ;图 片 、 音 频 、 视 频 等 多 媒体 的 上 
传 . 导 入 和 样式 修改 ;文档 格式 的 转换 ;多 媒体 的 上 传播 放 支 持 ;图 文 样式 的 调整 排版 ;图 
片 处 理 , 如 上 传 图 片 自动 生成 缩 略 图 .以 解决 打开 图 片 库 选 图 速度 慢 的 问题 ; 非 本 地 服务 器 
图 片 自动 下 载 及 保存 ;完善 的 表格 编辑 功能 (可 插入 ,删除 、 修 改 、 合 并 、 拆 分 等 ) ,可 编辑 表格 
背景 色 、 表 格 线 等 ,并 有 预览 功能 ,满意 后 插入 /修改 ;表格 线 的 加 上 与 去 除 支持 ;插入 
Word/Excel 等 代码 ; 自 定义 CSS 样式 等 。 

常见 的 在 线 编辑 器 有 FreeTextBox、CKeditor( 其 旧版 本 为 FCKeditor 等 。 也 有 一 些 国 
人 写 的 相当 优秀 的 在 线 编辑 器 ,如 KindEditor、WebNoteEditor 等 ,还 有 上 述 编辑 器 的 改进 
版 本 等 。 

2. KindEditor 在 线 编辑 器 

(1) KindEditor 在 线 编辑 器 简介 

KindEditor 是 国人 开发 的 一 套 开源 的 在 线 HTML 编辑 器 ,主要 用 于 让 用 户 在 网 站 上 
获得 所 见 即 所 得 的 编辑 效果 ,开发 人 员 可 以 用 KindEditor 把 传统 的 多 行文 本 输入 框 
(textarea) 替 换 为 可 视 化 的 富 文本 输入 框 。KindEditor 使 用 JavaScript 编写 ,可 以 无 颖 地 与 
Java、. NET、PHP、ASP 等 程序 集成 ,比较 适合 在 CMS ,商城 .论坛 .博客 ` Wiki 电子 邮件 等 
互联 网 应 用 上 使 用 。 该 编辑 器 的 默认 模式 的 截图 如 图 6-16 所 示 。 





自 | 习 | 欧 术 加 思 X 本 本 西国 | 匿 委 沽 要 汪 注 王 下 “> 妃 A| 因 
Ht- FT-|A- 网 -B ZU 必 浊 CQ| 辐 移 四 可 上 四 下 电 国电 二 呈 冀 | 国 




















图 6-16 
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(2) KindEditor 在 线 编辑 器 的 特点 

。 快速 : 体积 小 ,加 载 速度 快 。 

。 开源; 开放 源 代码 ,高 水 平 ,高 品质 。 

。 底层 : 内 置 自 定义 DOM 类 库 ,精确 操作 DOM 。 

。 扩展 ; 基于 插件 的 设计 ,所 有 功能 都 是 插件 ,可 根据 需求 增 减 功能 。 

。 风格 : 修改 编辑 器 风格 非常 容易 ,只 需 修改 一 个 CSS 文件 。 

。 兼容 : 支持 大 部 分 主流 浏览 器 ,比如 IE、Firefox、Safari、Chrome、Opera 等 。 

(3) KindEditor 在 线 编辑 器 的 下 载 

该 在 线 编辑 器 可 以 在 其 官方 网 站 上 下 载 ,网 站 地 址 是 http://kindeditor. net/ 。 

(4) KindEditor 在 线 编辑 器 的 使 用 

首先 需要 在 官方 网 站 上 下 载 KindEditor 在 线 编辑 器 ,解压 后 得 到 文件 夹 kindeditor, 假 
设 要 使 用 编辑 器 的 网 页 文件 和 编辑 器 文件 包 kindeditor( 即 kindeditor 文件 夹 ) 在 同一 个 
目录 。 

第 一 步 ,在 网 页 的 二 head 二 与 二 /head 二 标签 之 间 引 入 编辑 器 的 CSS 文件 和 JavaScript 
文件 。 代 码 如 下 。 


<link rel= "stylesheet" href= "kindeditor/themes/default/default .css" /> 
<script charset= "utf- 8" src= "kindeditor/kindeditor-min.js">< /script> 
< script charset= "utf- 8" src= "kindeditor/lang/zh CN.js">< /script> 


第 二 步 ,编写 JavaScript 代码 来 初始 化 一 个 应 用 对 象 , 代 码 如 下 。 


<script> 

Var editor; 

KindEditor .ready (function (K) { 
editor=K.create('textarea[name= "content"]', { 

allowFileManager: true 

D; 

Ds; 

</script> 


第 三 步 , 在 需要 插入 编辑 器 的 地 方 插入 如 下 代码 ; 

< textarea name= "content" style= "width:800px;height:300px;visibility:hidden;">< /textarea 

区 

编辑 器 的 宽度 和 高 度 可 以 根据 实际 情况 来 确定 。 

若 要 单独 调用 编辑 器 图 片上 传 功能 , 则 需要 在 编辑 器 初始 化 时 ,为 图 片上 传 按钮 添加 单 
击 事件 。 例 如 可 用 类 似 以 下 的 代码 。 


K('#image3') .click (function() { 
editor.loadPlugin('image', function() { 


1 
2 

E editor.plugin.imageDialog ({ 

4 showRemote: false, 

5 imageUr1: K('#site logo") .val()， 

6 clickEn: function(url, title, width, height, 
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borger, align) { 
了 K('#site logo") .val (url); 
8 editor.hideDialog(); 
9 } 
10 D) 
了 nD) 
12 D) 


在 上 述 代码 中 ,第 1 行 的 意义 是 为 id 二 “image3” 的 按钮 添加 点 击 事件 。 第 2 一 8 行 代码 
为 弹出 上 传 图 片 的 窗口 并 实现 图 片 的 上 传 功 能 ,其 中 第 7 行 代码 是 把 上 传 图 片 后 的 路 径 通 
过 回调 函数 的 方式 设置 成 id= "site_logo" 元 素 的 value 值 。 


6.5 开发 管理 员 管 理 模块 


该 模块 主要 由 添加 管理 员 ,查询 输出 管理 员 信息 列表 、 修 改 管理 员 信息 和 删除 管理 员 信 
息 四 部 分 功能 组 成 ,以 下 将 详细 讲解 每 个 功能 模块 的 实现 方法 。 

1. 添加 管理 员 

该 功能 操作 首先 是 在 添加 管理 员 表单 页 admin_add. php 中 编辑 信息 ,编辑 完成 后 提交 
表单 ,此 时 ,表单 的 数据 将 提交 到 admin_add_pass. php 文件 ,该 文件 连接 到 MySQL 数据 
库 ,并 把 接收 到 的 数据 写 入 管理 员 信 息 表 的 相应 字段 ,这 样 ,管理 员 信息 写 入 数据 库 的 操作 
就 完成 了 。 

(1) 编写 “添加 管理 员 信 息 : 表单 页 "文件 (admin_add. pbp) 

该 文件 (admin_add. php) 的 完整 代码 如 下 。 


间 <?php 

2 require once('session.php'); 

3 ?> 

4 < IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtmll1- transitional .dtd"> 

§ <html xmlns= "http://www.w3.org/1999/xhtml"> 

6 <head> 

学 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

8 <title> 管 理 员 列 表 < /title> 

9 <link href= "css/table.css" rel="stylesheet" type= "text/css" /> 


10 < /head> 
1 <body> 
12 <formname="fom add" id="form add" action="admin add pass.php" method= 


"post" > 
13 <table width="100% " border="1" cellspacing="0" cellpadding= "0"> 
14 <tr> 
15 <td class= "tt" colspan= "6"> 添 加 管理 员 < /td> 
16 < /tr> 
17 <tr> 
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<td width= "6% " height= "35"><span style= "color:#F30"> * </span> 账 号 < /td> 
<td width= "30% ">< input type= "text" name= "admin name" id="admin name" / 
></td> 
<td width="13% ">< span style="color:#F30"> * </span> 密 码 < /td> 
<td width="28% "> < input name="admin pass" type="password" id="admin pass" 
size= "30" />< /td> 
< td width="23%" colspan="2"> < input type="submit" name="button" id= 
"button" value= "添加" />< /td> 
</tr> 
</table> 
< /form> 
< /body> 
</htm> 


该 页 的 效果 如 图 6-17 所 示 。 


(2) 编写 “添加 管理 员 信 息 





+ 帐号 + 密码 [| 


























图 6-17 





人 数据 库 " 文 件 (admin_add_pass. php) 


该 文件 的 主要 作用 是 把 表单 页 传递 过 来 的 数据 接收 并 写 和 数据库 中 ,该 文件 完整 的 代 


码 如 下 。 


ao ww Nb PP 


18 


<?Php 
require once('session.php'); 
require once('../inc/conn.php'); 
二 才 
< !DOCTYPE html PUBLIC "~ //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtml1/DTD/xhtmll1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
< /head> 
<body> 
<?Pphp 
$admin name=$_POST['admin name']; 
if($admin name==""){ 
echo "< script>alert ("账号 不 能 为 空 1') ;history.go(-1)</script>"; 
exit; 
Jelseif (mysql_ num rows (mysql query ("SELECT * FROM admin WHERE admin name="'".$ POST 
["admin name']."""))>0){ 
echo "< script> alert (' 该 账号 已 存在 ,请 换 另 一 个 账号 !' 
'admin add.php'< /script>"; 


; window. location. href= 
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19 exit; 

20 |]} 

i 

22 $admin pass=$ POsT['admin pass']; 

23 if($admin pass==""){ 

24 echo "< script>alert (' 密 码 不 能 为 空 !1') ;history.go(-1)</script>"; 

25 exit; 

26 } 

27 $sql add="INSERT INTO admin (admin name,admin pass) VALUES ('".$admin name.™','". 
$admin pass."')"; 

28 mysql query($ sql add); 

29 echo "< script > alert (' 添 加 成 功 ! ');window. location. href= "admin list.php'; 
</script>"; 

30 exit; 

31 mysql_close ($ conn); 

32 ?> 

33 < /body> 

34 </html> 

在 上 述 的 代码 中 : 


第 1 行 用 于 把 session. php 文件 包含 进来 ,以 保护 该 文件 ,所 起 到 的 作用 是 : 只 有 经 过 
登录 验证 模块 进来 的 管理 员 才能 查看 该 页 面 。 

第 2 行 用 于 把 连接 数据 库 的 文件 包含 到 本 页 面 中 。 

第 13 一 20 行 中 ,首先 是 接收 表单 元 素 admin_name 的 数据 ,并 赋 给 $admin_name 变 
量 , 接 着 对 $admin_name 变量 进行 非 空 验证 , 若 为 空 则 弹出 提示 信息 。 若 不 为 空 , 则 判断 
该 管理 员 的 账号 是 否 存在 , 若 存在 , 则 弹出 该 管理 员 已 存在 的 提示 信息 。 其 中 代码 mysql_ 
num_rows(mysql_query("SELECT * FROM admin WHERE admin_name=". $_POST 
[admin_name]. "")) 返 回 的 结果 为 查询 该 管理 员 记录 的 条 数 , 若 为 0, 说 明 该 账号 不 存在 ， 
可 以 使 用 ; 若 大 于 0, 则 说 明 管 理 员 信息 表 中 已 存在 该 账号 了 ,不 能 重新 添加 该 账号 。 

第 22 行 用 于 接收 表单 元 素 admin_pass 传递 过 来 的 数据 ,并 赋 给 $ admin_name 变量 ， 
然后 再 对 $ admin_name 变量 进行 非 空 判断 。 

第 27 行 是 把 接收 到 的 数据 写 入 admin 数据 表 的 SQL 语句 。 

第 28 行 用 于 执行 $sql_add 变量 存储 的 SQL 语句 。 

第 31 行 中 ,mysqlL_close( ) 函数 用 于 关闭 数据 连接 。 

2. 查询 输出 管理 员 信息 列表 

该 操作 主要 是 查询 数据 库 的 admin 表 , 并 把 管理 员 信 息 以 列表 的 形式 输出 。 


oa 由 w Nb 


“管理 员 信 息 列表 页 ”文件 (admin_list. php) ,完整 的 代码 如 下 。 


<?php 

require once('session.php'); 
require once('../inc/conn.php'); 
入 


< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
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xhtmlL1/DTD/xhtmll- transitional.dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- TYpe" content= "text/html; charset=utf- 8" /> 
<title> 管 理 员 列表 < /title> 
<link href="css/table.css" rel= "stylesheet" type= "text/css" /> 
</head> 
<body> 
< form name=" form add" id="form add" action="admin add pass.php"” method= 
ab > 
<table width="100% " border= "1" cellspacing="0" cellpadding= "0"> 
tr> 
<ta class= "tt" colspan= "2"> 管 理 员 列表 < /td> 
</tr> 
<tr> 
<td height= "35"> 账 号 < /td> 
<tad width="25% "> 操作 < /td> 
</tr> 
<?php 
// 记 录 的 总 条 数 
$ total num=mysql num rows (mysql query ("SELECT id FROM admin")); 
// 设 置 每 页 显示 的 记录 数 
$ pagesize=10; 
// 计 算 总 页 数 
$ page num= ceil ($ total num/$pagesize); 
// 设 置 页 数 
$page=$_GET['page']; 
if($page<1 || $page==""'){ 
$page=1; 
} 
if ($page> $ page_num) { 
$ page=$ page_num; 
} 
// 计 算 记录 的 偏 移 量 
$ offset=$pagesize* ($page—1); 
Hs F= 
$ prepage= ($page<>1)?$page- 1:$page; 
S$ nextpage= ($page< > $page num)?$ paget 1:$page; 
// 读 取 指 定 的 记录 数 
$sql="SELECT * FROM admin LIMIT $offset,$ pagesize"; 
$result=mysql query($ sql); 
while ($row=mysql fetch array ($result)){ 
22> 


<tr> 
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48 <td height="35"><?=$row['admin name']?></td> 
49 <td> < input type= "button" name= "button" id= "button" value= "修改 " onclick=" 
Window.location. href = ' admin modify. php? id= <?= $row ['id']?>'" /> 
Enbsp; enbsp; 
50 < input type= "button" name= "button2" id= "button2" value= "删除 " onclick= 
"window.location.href= 'admin delete.php?id=<?=$row['id']?>"'" <?php if($row 
["'admin name']== 'admin') {echo"disabled= 'disabled'";}?>/> </td> 
51 </tr> 
52 <? 
53 } 
54 2> 
55 <tr> 
56 < td height= "35" colspan= "2" align= "center"> < ?=$page?>/<?=$page 
_num? > gnbsp; gnbsp; < a href="?page=1"> 首页 < /a> gnbsp; gnbsp; < a href 
="?page=<?=$prepage? >"> 上 一 页 < /a> gnbsp; gnbsp; < a href="?page= 
< ?= $nextpage?>"> 下 一 页 < /a> grnibsp; gnbsp;<a href="?page=-<?=$page num?>"> 尾 页 
</a></td> 
5 </tr> 
58 </table> 
59 < /form> 
60 <body> 
61 </html> 
在 上 述 代码 中 : 


第 24 行 代码 的 意义 为 计算 数据 库 中 admin 表 的 记录 总 数 并 赋 给 $ total_num 变量 。 

第 26 行 代码 的 意义 为 创建 $ pagesize 变量 ,并 把 数字 10 赋 给 该 变量 , 即 该 变量 用 于 设 
置 每 页 显示 的 记录 条 数 。 

第 28 行 代码 的 意义 为 根据 总 记录 数 和 每 页 显示 记录 数 计算 总 页 数 , 当 出 现 小 数 时 ,将 
使 用 ceil() 函数 向 上 售 人 为 最 接近 的 整数 。 

第 30 一 36 行 代码 为 设置 当前 的 页 数 。 

第 38 行为 设置 记录 的 偏 移 量 

第 40 行 .41 行 代码 分 别 设置 上 一 页 和 下 一 页 。 

第 45 一 53 行 代码 为 使 用 while 循环 输出 管理 员 信息 ,形成 管理 员 信息 列表 。 

第 56 行为 输出 分 页 导航 信息 。 

第 49 行 代码 中 , 当 单 击 “ 修 改 ” 按 钮 的 时 候 , 触 发 了 单 击 事件 .该 事件 为 跳 转 到 admin_ 
modify. php 页 面 ,同时 传递 该 条 记录 的 id, 因 为 到 下 一 个 页 面 需 知道 要 修改 的 是 哪 条 记录 。 
车 没有 传递 id, 则 到 下 一 页 。 默 认 显示 的 是 结果 集中 的 第 一 条 记录 ,使 得 修改 数据 不 准确 。 
对 于 “删除 ”按钮 ,其 原理 和 "修改 ”按钮 基本 一 致 ,不 同 的 是 在 该 按钮 中 多 了 代码 二? php 让 
($rowL'admin_name'] 二 二 '"admin') {echo"disabled 一 'disabled";} 2 二 ,该 代码 的 作用 是 为 
了 确保 账号 为 admin 的 管理 员 信息 不 能 被 删除 。 

该 文件 的 页 面 效果 图 如 图 6-18 所 示 。 
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1/1 首页 ”上 一 页 下 -页 ” 尾 页 





图 6-18 


3. 修改 管理 员 信 息 

要 修改 管理 员 信息 ,首先 需 把 要 修改 的 信息 查询 出 来 并 显示 在 表单 上 ,然后 通过 表单 把 
信息 传递 到 信息 修改 的 文件 中 ,该 文件 将 接收 表单 传递 过 来 的 信息 并 覆盖 数据 表 中 原来 的 
记录 信息 ,以 达到 修改 管理 员 信 息 的 目的 。 

(1) 编写 “修改 管理 员 信 息 : 显示 页 "文件 (admin_modify. pbp) 


该 文件 完整 的 代码 如 下 。 

1 <?php 

2 require once('session.php'); 

EE require once('../inc/conn.php'); 

4 $sql="SELECT * FROM admin WHERE id="'".$ _ GET["id']."""; 

5 $result=mysql_query($ sql); 

6 $row=mysql fetch array($ result); 

?> 

8 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtmll/DTD/xhtml1- transitional .dtd"> 

9 <html xmlns= "http://www.w3.org/1999/xhtml"> 

10 <head> 

11 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

12 ”<title> 管 理 员 列 表 < /title> 

23 <1link href="css/table.css" rel= "stylesheet" type= "text/css" /> 

14 </head> 

15 <body> 

16 < form name= "form add" id= "form add" action= "admin modify pass.php?id=<?=$row['id 
']?>" method= "post" > 

17 <table width="100% " border= "lw cellspacing="0" cellpadding= "0"> 

18 <tr> 

19 <td height="35" colspan= "6" class="tt"> 修 改 管理 员 < /td> 

20 </tr> 

21 <tr> 

2 <td width= "6s" height="35"> 账 号 < /td> 

23 <td width="30% ">< input name="admin name" type="text" id="admin name" Value 

="<?=$row['admin name']?>" disabled= 'disabled' /></td> 
24 <tqd width="8%$ "> 密码 < /td> 
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<td width="47% "> < input name= "admin pass" type="password" id= "admin pass" 
size= "25" /> 
< spna style= "color:#F30;font- size:12px;"> 
( 注 : 车 修改 ,请 输入 新 密码 !)< /span>< /td> 
< td width="9%" colspan="2"> < input type="submit" name="button" id= 
"putton" value= "修改 " /></td> 
</tr> 
</table> 
</form> 
</body> 
</html> 


上 述 代码 中 的 第 16 行为 form 标签 ,此 时 发 现 该 标签 action 的 属性 值 为 admin_modify_ 
pass. php? id 二 二 ? 二 $row['id'"]? 二 , 它 的 意义 是 把 该 表单 数据 传递 给 admin_modify. 
Php 文件 ,同时 把 修改 记录 的 id 值 赋 给 变量 id 进行 传递 ;第 23 行 input 标签 代码 disabled 一 
disabled 的 作用 是 使 该 账号 不 能 被 修改 ,只 能 修改 密码 。 同 时 应 注意 输出 提示 信息 告知 
用 户 。 
该 文件 页 面 的 效果 图 如 图 6-19 所 示 。 




















账号 labe11 密码 往 : 若 修改 ， 请 输入 新 密 














图 6-19 


(2) 编写 "修改 管理 员 信息 : 修改 页 ”文件 admin_modify_pass. php 


该 文件 的 完整 代码 如 下 。 

对 <?php 

2 require once('session.php'); 

3 require once('../inc/conn.php'); 

4 3 

5 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional.dtd"> 

6 <html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

8 <meta http- equiv= "Content— Type" content= "text/htmL; charset=utf- 8" /> 

9 <title> 无 标题 文档 < /title> 

10 </head> 

11 <body> 

12 <?php 

13 if($_POST['admin pass']==""){ 

14 echo "< script> alert (' 请 输入 新 密码 !') ;window.location.href= 'admin list.php'</ 

script>"; 

15 exit; 

16 3 

17 $sql="UPDATE admin set admin pass="".$_ POST['admin pass']."' WHERE id="'".$_GET['id 





18 
3 


20 
21 
22 
23 
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gd 

mysql query($ sql); 

echo "< script> alert (' 修 改 成 功 !');window. location. href= 'admin list.php 
< /acript> “7 

mysql_close ($ conn); 

So 

< /body> 

</html> 


上 述 代码 的 第 17 行为 更 新 管理 员 信息 的 SQL 语句 。 

4. 删除 管理 员 信 息 

编写 “删除 管理 信息 页 ”文件 (admin_delete. php) ,该 文件 的 主要 作用 是 删除 数据 表 中 
id 字段 的 值 等 于 传递 过 来 的 id 变量 值 的 记录 。 该 文件 完整 的 代码 如 下 。 


1 <?php 
require once('session.php'); 
3 require once('../inc/conn.php'); 
4 ?> 
5 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1l/DTD/xhtmll1- transitional .dtd"> 
6 <html xmlns= "http://www.w3.org/1999/xhtml"> 
这 <head> 
8 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
9 <title> 无 标题 文档 < /title> 
10 </head> 
11 <body> 
12 <?php 
13 $ sql= "DELETE FROM admin WHERE id="'".$_GET["id']."""; 
14 mysql_query ($ sql); 
15 echo "< script> alert (' 删 除 成 功 !');window. location.href= 'admin 1ist.php' 
</script> "7 
16 mysql_close ($ conn) 
17 2> 
18 </body> 
Ee </html> 
【知识 讲解 】 
1. ceil ( ) 函 数 
该 函数 为 向 上 舍 入 成 最 接近 的 整数 。 
语法 格式 如 下 : 
ceil (x) 
其 中 ,x 为 必需 的 。 其 返回 不 小 于 x 的 下 一 个 整数 ,x 如 果 有 小 数 部 分 则 进 一 位 。ceil 〇 0 
返回 的 类 型 仍然 是 float。 
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例如 ,对 不 同 的 值 应 用 ceil() 函数 的 语句 为 : 


< ?Php 
echo (ceil (0.60); // 该 行 代码 输出 的 结果 为 1 
echo (ceil (0.40); // 该 行 代码 输出 的 结果 为 1 


echo (ceil (5); // 该 行 代码 输出 的 结果 为 5 
echo (ceil (5.1); // 该 行 代码 输出 的 结果 为 6 
echo (ceil (- 5.1); // 该 行 代码 输出 的 结果 为 -5 


echo (ceil (- 5.9)); // 该 行 代码 输出 的 结果 为 -5 

汪 尖 

2. mysql_num_rows() 函 数 

该 函数 用 于 返回 结果 集中 行 的 数目 ,此 命令 仅 对 SELECT 语句 有 效 。 要 取得 被 
INSERT、UPDATE 或 者 DELETE 查询 所 影响 到 的 行 的 数目 ,用 mysql_affected_rows() 
函数 。 例 如 : 


$stu total=mysql num rows (mysql query(' SELECT * FROM student”)); 


3. MySQL 中 LIMIT 子 句 的 用 法 

使 用 查询 语句 的 时 候 , 经 常 要 返回 前 几 条 或 者 中 间 某 几 行 数据 ,LIMIT 子 句 可 以 被 用 
于 强制 SELECT 语句 返回 指定 的 记录 数 。LIMIT 接受 一 个 或 两 个 数字 参数 。 参 数 必 须 是 
一 个 整数 常量 。 

如 果 给 定 两 个 参数 ,第 一 个 参数 指定 第 一 个 返回 记录 行 的 偏 移 量 , 第 二 个 参数 指定 返回 
记录 行 的 最 大 数目 。 例 如 : 


SELECT * FROM table LIMIT [offset,] rows | rows offset 
如 果 LIMIT 后 跟着 两 个 参数 ,第 一 个 是 偏 移 量 ,第 二 个 是 数目 ,又 如 : 


SELECT * FROM employee LIMIT 3,7; // 返 回 第 4 一 11 行 
SELECT # FROM employee LIMIT 3,1; // 返 回 第 4 行 


若是 一 个 参数 , 则 表示 返回 前 几 行 ,如 : 
SELECT * FROM employee LIMIT 3; // 返 回 前 3 行 


4. 关于 分 页 

通常 的 Web 开发 都 要 与 数据 库 打 交道 ,客户 端 从 服务 器 端 读 取 通 常 都 是 以 分 页 的 形式 
来 显示 ,一 页 一 页 地 阅读 起 来 既 方 便 又 美观 。 所 以 说 写 分 页 程序 是 Web 开发 的 一 个 重要 组 
成 部 分 ,在 这 里 ,共同 来 研究 分 页 程序 的 编写 。 

要 对 记录 进行 分 页 ,首先 要 和 弄 清 楚 以 下 几 个 参数 。 

(1) 记录 总 数 。 取 得 记录 的 总 数 ,常用 的 有 两 种 方法 ,下 面 以 查询 学 生 信息 表 student 
为 例 进行 说 明 。 

第 一 种 方法 : 直接 查询 student 表 . 并 利用 SQL 语句 中 的 count( ) 函数 统计 记录 数 并 
返回 统计 结果 ,代码 如 下 : 
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$ record total=mysql query ("SELECT count (* ) FROM student"); 
第 二 种 方法 : 使 用 mysql_num_rows 函数 实现 ,代码 如 下 : 
$ record total=mysql num rows(mysql query ("SELECT * FROM student")); 


(2) 每 一 页 显示 的 记录 数 。 
该 记录 数 自 定义 ,代码 如 下 : 


$ pagesize=10; // 设 置 每 页 输出 的 记录 为 10 条 


(3) 总 页 数 。 

从 前 两 个 已 知 的 变量 得 知 ,总 页 数 是 等 于 总 记录 数 除 以 每 页 的 记录 数 。 细 心 的 读者 会 
发 现 , 总 页 数 可 能 会 出 现 小 数 的 情况 ,例如 总 记录 数 为 18, 每 页 显示 的 记录 数 为 10, 按 照 前 
面 的 计算 方法 得 出 的 结果 为 1. 8 页 , 那 究竟 有 多 少 页 呢 ? 答案 是 2 页 ,很 明显 ,出 现 小 数 的 
情况 下 ,只 要 能 向 上 舍 入 为 最 接近 的 整数 ,这 样 问题 就 可 以 解决 。 本 任务 的 第 1 个 知识 点 用 
到 的 ceil( ) 函 数 便 能 解决 该 问题 。 因 此 ,计算 总 页 数 的 公式 就 是 : 

总 页 数 三 ceil( 总 记录 数 /每 页 的 记录 数 ) 

因此 ,计算 学 生 信息 表 student 记录 的 总 页 数 的 代码 为 

$page total= ceil ($ record total/$ pagesize); 

(4) 当前 页 数 ( 即 当前 显示 第 几 页 的 记录 )。 

当前 的 页 数 通 常用 变量 $ page 来 表示 ,但 是 要 注意 以 下 情况 的 判断 : 

第 一 ,如 果 取 得 的 当前 变量 $ page 的 值 为 空 或 小 于 1, 则 应 强制 给 $ page 变量 赋值 为 
最 小 页 码 ,参考 代码 如 下 : 

$ page= (empty($_GET[‘page’]) ||$_GET[‘page’ ]< 1)?1:$_GET[‘page’ ]; 

第 二 ,如 果 取 得 当前 变量 $ page 的 值 大 于 总 页 数 , 则 应 强制 给 $ page 变量 赋值 为 最 大 
页 码 ,参考 代码 如 下 : 

if($_GET["page">$page total){ 

$page=$ page total; 

} 

第 三 ,为 了 防止 $ page 变量 的 值 为 非 数 字 类 型 ,应 将 $ page 变量 的 值 强 制 转 换 为 整 型 ， 
参考 代码 如 下 : 

$ page= (int)$ page; 

(5) 偏 移 量 

偏 移 量 是 理解 分 页 原理 的 关键 , 它 是 指 输出 当前 页 记录 的 时 候 , 应 从 结果 集 的 哪 一 条 记 
录 开 始 输出 ,输出 记录 的 条 数 为 $ pagesize,SQL 语句 的 LIMIT 用 法 恰好 能 解决 该 问题 。 

通常 用 $ offset 变量 表示 ,其 计算 方法 为 


$ offset= ($page- 1) * $pagesize; 


例如 ,要 查询 学 生 信 息 表 并 进行 分 页 , 则 SQL 查询 语句 应 为 
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$sql=”SELECT * FROM student LIMIT $ offset,$ pagesize” 


(6) 首页 、 上 一 页 、 下 一 页 、 尾 页 
在 分 页 中 ,通常 会 引入 “首页 、 上 一 页 .下 一 页 、 尾 页 ”的 控制 方式 ,以 方便 用 户 对 记录 的 浏览 。 
@ 首页 : 即 页 码 为 1。 


@ 上 一 页 : 这 里 要 考虑 的 情况 是 : 若 当前 页 码 为 1 时 ,上 一 页 就 不 应 为 0 而 强制 为 1; 





若 当前 的 页 码 不 为 1 时 ,上 一 页 就 应 该 是 当前 页 码 减 1( 或 使 链接 失效 ) ,参考 代码 如 下 : 


$ prepage= ($page<>1)?$page-1:$ page; 


@ 下 一 页 :这 里 要 考虑 的 情况 是 , 若 当前 页 码 为 最 后 一 页 时 ( 即 当 前 页 码 为 $page_ 


total 变量 的 值 ) ,下 一 页 就 不 应 为 当前 页 加 1 ,而 应 强制 设置 为 最 大 页 码 数 (或 使 链接 失效 ) 。 
参考 代码 如 下 : 


$nextpage= ($page<>$ page num)?$ paget+1:$ page; 

@ 尾 页 ; 即 页 码 为 总 页 数 。 

5. 关于 while 循环 语句 

while 循环 只 要 指定 的 条 件 为 真 ,就 会 执行 代码 块 ,其 语法 如 下 : 
while (条 件 为 真 ) { 


要 执行 的 代码 ; 
} 


例如 


<?Php 

$x=1; 

while($x<=5) { 
echo "这 个 数字 是 : $ x<br>"; 
$xt++2? 

} 


?> 


上 述 代 码 中 ,首先 把 变量 $ x 设置 为 1($ x 二 1) ,然后 执行 while 循环 直至 $ x 变量 的 


值 大 于 5。 循 环 每 运行 一 次 ,$x 将 递增 1。 


66 开发 单 页 管理 模块 


该 模块 主要 由 添加 单 页 .查询 输出 单 页 信息 列表 、 修 改 单 页 信息 和 删除 单 页 四 种 功能 组 


成 ,以 下 将 详细 讲解 每 种 功能 的 实现 方法 。 
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1. 添加 单 页 信息 
(1) 编写 “添加 单 页 信息 : 表单 页 ”文件 single_add. php 
该 页 文件 完整 的 代码 如 下 。 


1 <?Ehp require once('session.php');?> 
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< !DOCTYPE html PUBLIC "— //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtml1/DTD/xhtmll1- transitional .dtd"> 

<html xmlns= "http://www-w3.org/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- TYpe" content= "text/html; charset=utf- 8" /> 

<title>< /title> 

<link rel= "stylesheet" href="kindeditor/themes/default/default .css" /> 

< link href= "css/table.css" rel= "stylesheet" type= "text/css" /> 

< script charset= "utf- 8" src="kindeditor/kindeditor-min.js"></script> 

< script charset= "utf- 8" src="kindeditor/lang/zh CN.js"></script> 


<script> 


var editor; 
KindEditor.ready (function (K) 
{ 
editor=K.create ('textarea [name= "content"]', { 
allowFileManager: true 
Ds; 
K('#image3') .click (function() { 
editor.loadPlugin('image', function() { 
editor.plugin.imageDialog ({ 
showRemote: false, 
imageUr1: K('#url13') .val (), 
clickFn: function (url, title, width, height, border, 
align) { 
K('#url3') .val (url); 
editor.hideDialog(); 


Ds; 


</script> 
</head> 


<body> 
< form id= "forml" name= "forml" method= "post" action= "single add pass.php"> 


<table width="100% " border="]" cellspacing="0" cellpadding= "0"> 
<tr> 
<td colspan= "2" class= "tt"> 添 加 单 页 < /td> 
</tr> 
<tr> 
<td width= "15%" height= "35">< span style= "color:#F30"> * < /span> 标 题 : < /td> 


<td width= "85% "> < input name= "title" type= "text" id= "title" size="50" /> 
</td> 
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</tr> 
<tr> 
<tq height="31"> 来 源 : < /td> 
< td> < input name= "comefrom" type= "text" id= "comefrom" value= "本 站 " /></ 
td> 
< /tr> 
<tr> 
<td height="29"> 发 布 日 期 : < /td> 
<td>< input name= "pubdate" type= "text" id= "pubdate" value="< ?php 
date default timezone set('UTC'); 
echo date(Y 年 m 月 4d 日); 
2>" /></td> 
try 
<tr> 
<td height="68"> 关 键 字 : < /td> 
<td><label for="keywords">< /label> 
< textarea name= "keywords" cols="60" rows="3" id= "keywords"> </textarea>< /td 
> 
</tr> 
<tr> 
<td height="69"> 描 述 : < /td> 
<td> < textarea name= "description" cols="60" rows= "3" id= "ur13"> < /textarea> 
</td> 
</tr> 
<tr> 
<td height="353">< span style= "color:#F30"> * </span> 内容: </td> 
<td> < textarea name="content" style="width: 800px; height: 300px; visibility: 
hidden;">< /textarea>< /td> 
</tr> 
<tr> 
<td height= "35" colspan= "2"> < input type= "submit" name= "Submit" value= "提交 " />< 
/to> 
</tr> 
</table> 
< /form> 
< /body> 
</html> 


该 页 的 效果 图 如 图 6-20 所 示 。 


(2) 编写 “添加 单 页 信息 : 写 和 数据库 ?文件 single_add_pass. php 

该 页 完整 的 代码 如 下 。 

本 <?Ehp session start();?> 
< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 

邹 <html xmlns= "http://www-w3-org/1999/xhtml"> 
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33 
14 


驰 
16 
18 


到 in 间 页 
+ 标题 : 
来 源 : 开店 
发 布 日 期 2015 年 05 月 24 日 
关注 字 : 
牛 ， 
自 | 是 | 发 基 加 回头 了 到 动 国 | 王 委 玛 二 注 汉 棕 理 < > 号 A| 因 
H- 无 下 |A- 网 BZzUw 和 2| 必 本 而 丁 和 日 了 吕 回 己 之 二 冯 | 个 
# 了 内容: 
| 


























图 6-20 


<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

<title></title> 

</head> 

<body> 

<?Php 

require once('session.php'); 

require once('../inc/conn.php'); 
$ sql =" INSERT INTO single (title, comefrom, pubdate, keywords, description, 
content) VALUES('".$ _POST['title']."','".$_POST['comefrom']."','".$_ 
POST['pubdate']."', '".$_POST['keywords']."', '".$_POST['description']."', '".$_POST[' 
content']."™)"; 

mysql_query ($ sql,$ conn); 
echo "< script > alert (' 添 加 成 功 ! ');window. location. href = ' single_add. php '; 
</script>"; 

mysql_close($ conn); 

?> 

< /body> 

</htm> 


2. 查询 输出 单 页 信息 列表 
该 操作 主要 是 查询 数据 库 的 single 表 , 并 把 单 页 信息 以 列表 的 形式 输出 。 
编写 “ 单 页 信息 列表 页 ”文件 (single_list. php) ,完整 的 代码 如 下 。 


1 


-4 


< ?php session start();?> 
<?php 
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require once('session.php'); 


k 
4 require once('../inc/conn.php'); 
5 2> 

6 


< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtml1- transitional.dtd"> 


7 <html xmlns= "http://www.w3.org/1999/xhtml"> 
8 <head> 
9 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 


10 <title></title> 
11 <linkhref="css/table.css" rel= "stylesheet" type="text/css" /> 
如 </head> 


13 
14 <body> 

乱 <table width= "100$ "border= "1" cellspacing= "0" cellpadding= "0"> 
16 <tr> 

17 <td class= "tt" colspan= "5"> 单 页 管理 < /td> 

18 < /tr> 

19 <tr> 

20 <td width= "6%" height="35"> 单 页 ID< /td> 

21 <td width= "19% "> 标题 < /td> 

22 <td width= "29% "> 发 布 日 期 < /td> 

23 <td colspan= "2"> 操 作 < /td> 

24 < /tr> 

25 <?Fhp 

26 // 记 录 的 总 条 数 

27 $ total num=mysql num rows (mysql query("SELECT id FROM single")); 
28 // 设 置 每 页 显示 的 记录 数 

29 $ pagesize=10; 

30 // 计 算 总 页 数 

31 $ page_ num ceil ($ total num/$ pagesize); 

32 // 设 置 页 数 

33 $page=$_GET['page']; 

34 if($page<1 || $page==""){ 

35 $page=1; 

36 } 

37 if($page> $page_num) { 

38 $ page= $ page_num; 

39 } 

40 // 计 算 记录 的 偏 移 量 

41 $ offset=$pagesize* ($page—1); 

42 AI 上 一 页 \ 下 一 责 

43 $ prepage= ($page< >1)?$page- 1:$page; 

44 S$ nextpage= ($page< >$ page num)?$ paget1:$page; 

45 // 读 取 指 定 的 记录 数 

46 $sql="SELECT * FROM single LIMIT $0offset,$ pagesize"; 
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47 
48 
49 
50 
S51 
52 
53 
54 


55 


56 
57 
58 
59 
60 
61 


62 
63 
64 
65 
66 
67 
68 


$result=mysql query($ sql); 
while($ row=mysql fetch array($ result)){ 
2> 
<tr> 
<td height="31"><?php echo $ rs['id']?></td> 
<td><?Php echo $ row['title']?></td> 
<td>< ?php echo $ row['pubdate']?>< /td> 
< td width="12%"> < input type="button" name="button" id="button" value= 
"修改 " onclick= "window-location.href- 'single modify.php?id=<?php echo $row['id 
"> < 
<td width="11% ">< input type= "button" name= "button2" id="button2" value= " 删 
除 " onclick= "window.location.href='single delete.php?id=<?php echo Srow['id 
Mos fe 
</tr> 
<?php 


<tr> 
< td height= "43" colspan= "5" align= "center"> < ?=$page?>/<?=$page 
_num? > &nbsp; gnbsp; < a href="? page=1"> 首 页 < /a> gnbsp; gnbsp; < a href 
= "?page=< ?=$prepage? >"> 上 一 页 < /a> gnbsp; &nbsp;<a href="?page= 
< ?= $nextpage?>"> 下 一 页 < /a> gnbsp;&nbsp;<a href="?page=<?=$page num?>"> 尾 页 
</a></td> 
</tr> 
</table> 
< /body> 
</htm> 
<“?Php 
mysql_close ($ conn) 
2> 


该 页 运行 的 效果 如 图 6-21 所 示 。 


单 页 管理 
单 页 ID 标题 发 布 日 期 


关于 我 们 2015 年 12 月 17 日 
联系 我 们 2045 年 12 月 17 日 


M1 首页 上 一 页 下 一 页 尾 页 








图 6-21 


3. 修改 单 页 信息 
(1) 编写 “修改 单 页 信息 : 显示 页 ”文件 single_modify. php ,代码 如 下 。 


<?php 


session start (); 
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3 require once('session.php'); 
4 ?> 
六 < IDOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 


xhtml1/DTD/zxhtml1- transitional .dtd"> 

<html xmlns= "http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title>< /title> 

10 <link rel="stylesheet" href= "kindeditor/themes/default/default .css" /> 
11 <linkhref="css/table.css" rel="stylesheet" type="text/css" /> 

12 <script charset= "utf- 8" src= "kindeditor/kindeditor-min.js">< /script> 
yk <script charset= "utf- 8" src="kindeditor/lang/zh CN.js">< /script> 

14 <script> 


15 var editor; 

16 KindEditor.ready (function (K) 

17 { 

18 editor=K.create ('textarea[name= "content"]', { 
了 allowFileManager: true 

20 Ds; 

得 K('#image3') .click(function() { 

22 editor.loadPlugin('image', function() { 

23 editor.plugin.imageDialog ({ 

24 showRemote: false, 

站 imageUrl: K('#url3') .val (), 

26 clickFn: function (url, title, width, height, border, align) { 
27 K('#url3') .val (url); 

28 editor.hideDialog(); 

29 } 

30 D); 

31 D; 

32 D; 

33 Ds; 


34 </script> 

35 </head> 

36 <body> 

37 <?php 

38 reqire once('../inc/conn.php'); 

39 $sql="SELECT * FROM single WHERE id='".$ GET["id']."""; 

40 $result=mysql query($ sql); 

41 S$rs=mysql fetch array($ result); 

42 2 

43 <fom id="forml" name="forml" method="post" action="single modify pass.php?id=<? 
php echo $ rs['id']?>"> 

<table width="100$" border= "1"” cellspacing= "0" cellpadding= "0"> 
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45 
46 
47 
48 
49 


50 


过 下 > 
<td colspan= "2" class= "tt"> 修 改 单 页 < /td> 
< /tr> 
<tr> 
<td width= "12$" height="35"> < span style= "color:#F30"> * < /span> 标 题 : < /td> 


<td width="88% ">< input name= "title" type= "text" id="title" value= ' '<?php 
echo $rs['title']?>" size="50" /></td> 
</tr> 
<tr> 
<td height="31"> 来 源 : < /td> 
<td>< input name= "comefrom" type= "text" id="comefrom" value= "< ?php echo $rs 
['comefrom']?>" /></td> 
</tr> 
<tr> 
<td height="29"> 发 布 日 期 : < /td> 
<td>< input name= "pubdate" type= "text" id= "pubdate" value="< ?php echo $rs[' 
pubdate']?>" />< /td> 
</tr> 
<tr> 
<td height="68"> 关 键 字 : < /td> 
<td>< label for="keywords"></label> 
< textarea name= "keywords" cols="60" rows="3" id="keywords"><?php echo $ rs[' 
keywords']?>< /textarea>< /td> 
</tr> 
<tr> 
<td height="69"> 描 述 : < /td> 
< td> < textarea name= "description" cols="60" rows="3" id="url3"><?php echo 
$ rs['description']?>< /textarea>< /td> 
</tr> 
<tr> 
<td height="353">< span style= "color:#F30"> * </span> 内容: </td> 
<td> < textarea name= "content" id= "content" style="width:800px;height:300px; 
visibility:hiddeny"> 
<?Php echo htmlspecialchars ($ rs['content']); ?> 
</textarea></td> 
</tr> 
<tr> 
<td height= "35" colspan= "2"> < input type= "submit" name= "Submit" value= "提交 " />< 
/td> 
</tr> 
</table> 
</form> 
</body> 
</htm> 
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<?php 
mysql_close($ conn); 


Ss 


该 页 面 的 效果 如 图 6-22 所 示 。 








修改 间 页 
ET 
于 区 到 77 
| 
日 ”|2015 年 12 月 17 日 
期 : 
关键 |a977 
字 : 
4 
所 ”|aq77 
| 自 9R| 区 种 国 四 % 名 飓风 网 | 于 要 性 画 丘 汪 强 强 * wh 答 R| 网 
J 加 时 = 
古道 条 香 贸 易 有 限 公 司 ， 是 中 国 重大 的 茶叶 经 营 企业 和 全 球 最 大 的 绿茶 出 口 企业 ， 其 前 身 成 立 于 1950 年 ， 读 公 司 至 力 于 为 全 球 客户 提供 绿色 、 健 “| 
康 、 优 质 的 茶叶 饮品 ， 以 茶 为 主 、 工 贸 结合 、 多 元 发 展 ， 产 品 材 盖 茶 叶 、 共 制品、 茶叶 机 械 、 有 机 农产品 等 ， 销 蔓 网 络 遍及 全 球 六 十 多 个 国家 和 jb 区 | 
























































图 6-22 


(2) 编写 "修改 单 页 信息 : 修改 页 ”文件 single_modify_pass. php ,该 页 面 的 代码 如 下 。 


ww wb PP 


15 
16 


17 
18 
19 


<?Php 

session start(); 

require once('session.php'); 

2 

< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 

xhtml1/DTD/xhtml1l- transitional.dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- TYPe" content= "text/html; charset=utf- 8" /> 

<title>< /title> 

< /head> 

<body> 

<?Ehp 

require once('../inc/conn.php'); 

$sql ="UPDATE single set title= '".$ POST['title']."', comefrom= '".$ POST 
['comefrom']."',pubdate="'".$_POST['pubdate']."', keywords= '".$_POST ['keywords']." 
',description='".$_POST['description']."',content='".$_POST['content']."' WHERE id 
二 

mysql query($ sql,$ conn); 

echo "< script> alert ("修改 成 功 !');window.location.href= 'single list.php';</script 

-Yk 

mysql_close ($ conn); 

2 


< /body> 
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</html> 


4. 删除 单 页 信息 
编写 "删除 单 页 信息 页 ”文件 (single_delete. php) ,该 文件 的 主要 作用 是 删除 数据 表 中 
id 字段 的 值 等 于 传递 过 来 的 id 变量 值 的 记录 。 该 文件 完整 的 代码 如 下 : 


1 <?php 

2 session start (); 

| require once('session.php'); 

4 2> 

5 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 

6 <html xmlns= "http://www.w3.0rg/1999/xhtml"> 

党 <head> 

8 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

全 <title>< /title> 

10 </head> 

11 <body> 

12 <?php 

13 require once('../inc/conn.php'); 

14 $sql= "DELETE FROM single WHERE id="'".$ GET["id']."'"; 

号 mysql_query ($ sql,$ conn); 

16 echo "< script> alert (' 删 除 成 功 ');window. location.href='single_list.php' 

</Jscript> "» 

17 mysql_close ($ conn); 

18 多 

19 < /body> 

20 </htm> 

【知识 讲解 】 

关于 单 页 管理 模块 


什么 是 单 页 管理 模块 呢 ? 可 以 这 样 理解 : 在 一 个 企业 网 站 中 ,通常 有 一 些 栏目 只 需 一 
个 页 面 的 篇 幅 就 能 显示 其 内 容 。 例 如 “关于 我 们 ”页 面 “ 联 系 我 们 ”页 面 “商家 加 盟 信息 ”页 
面 等 。 为 了 方便 对 这 些 单 页 面 进行 管理 ,通常 会 开发 单 页 管理 模块 ,通过 此 模块 可 以 根据 实 
际 情 况 增加 、 删 除 、 修 改 单 页 信息 。 在 使 用 时 应 注意 ,只 需 在 后 台 单 页 管理 模块 中 添加 单 页 ， 
在 网 站 的 前 台 就 可 以 输出 该 单 页 信息 了 。 


6.7 开发 文章 管理 模块 


该 模块 主要 由 添加 文章 信息 .查询 输出 文章 信息 列表 、 修 改 文章 信息 和 删除 文章 信息 四 
种 功能 组 成 ,以 下 将 详细 讲解 每 种 功能 的 实现 方法 。 
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1. 添加 文章 信息 
(1) 编写 * 添 加 文章 信息 : 表单 页 "文件 article_add. php .代码 如 下 。 


1 <?php 
: session start (); 

3 require once('session.php'); 

4 require once("../inc/conn.php"); 

5 ?> 

6 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www-w3.org/TR/ 


xhtml1/DTD/xhtml1- transitional .dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
10 <title></title> 

和 <link rel="stylesheet" href= "kindeditor/themes/default/default .css" /> 
12 <link href="css/table.css" rel="stylesheet" type= "text/css" /> 

#3 <script charset= "utf- 8" src= "kindeditor/kindeditor-min.js">< /script> 
14 < script charset= "utf- 8" src="kindeditor/lang/zh CN.js">< /script> 


| 


15 <script> 


16 Var editor; 

bv KindEditor.ready (function (K) 

18 { 

19 editor=K.create ('textarea[name= "content"]', { 

20 allowFileManager: true 

21 Ds; 

2 K('#image3') .click (function() { 

2 editor.loadPlugin('image', function() { 

24 editor.plugin.imageDialog ({ 

25 showRemote: false, 

26 imageUrl: K('#url3') .val (), 

27 clickFn: function (url, title, width, height, border, 
align) { 

28 K('#url13') .val (url1); 

29 editor .hideDialog (); 

30 } 

31 D; 

32 D; 

33 D); 

34 D; 

35 </script> 

36 </head> 

37 

38 <body> 

39 < fom id "foml" name= "forml" method= "post" action= "article add pass.php"> 

40 <table width="100%" border="1" cellspacing= "0" cellpadding= "0"> 


158 


工作 任务 6 网 站 后 台 开 发 





41 
42 
43 
44 
45 


46 


76 


77 


< 
<td class="tt" colspan= "2"> 添 加 文章 < /td> 
</tr> 
<tr> 
<td width= "12%" height= "35"> < span style= "color:#F30"> * < /span> 标题 : 
</td> 
<td width= "88% "><input name= "title" type= "text" id="title" size="50" />< /td 
> 
</tr> 
<tr> 
<td height="31"> 来 源 : < /td> 
< td> < input name= "comefrom" type= "text" id= "comefrom" value= "本 站 " /></ 
td> 
</tr> 
<tr> 
<td height="29"> 发 布 日 期 : < /td> 
<td> < input name= "pubdate" type= "text" id= "pubdate" value="< ?php 
date default timezone set('UTC'); 
echo date(Y 年 m 月 d 日 ); 
?>"” /></td> 
</tr> 
<tr> 
<td height= "60"> 关 键 词 : < /td> 
<td><label for="keywords">< /label> 
< textarea name =" keywords" cols =" 60" rows ="3" id=" keywords" > 
< /textarea>< /td> 
</tr> 
<tr> 
<td height="60"> 描 述 : < /td> 
<td>< label for="description">< /label> 
< textarea name =" description" id="description" cols="60" rows="3"> 
</textarea>< /td> 
< /tr> 
eS 
<td height= "243">< span style= "color:#F30"> * </span> 内容: < /td> 
< td> < textarea name="content" style="width: 800px; height: 300px; visibility: 
hidden;">< /textarea>< /td> 
</tr> 
<tr> 
<tqd height= "33"> 推 荐 位 : < /td> 
< td> < input name =" posid [ ] ”type = "checkbox" id="posid" value= 
"setindex" /> 
首页 推荐 gnbsp; gnbsp; < input name="posid[]" type="checkbox" id= 
"posid" value= "settop" /> 
首页 置顶 < /td> 
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78 </tr> 

79 Ey 

80 <td height="43" colspan="2"> < input type="submit" name="Submit" value= "提交" 
/></td> 

81 </tr> 

82 </table> 

83 </fom> 

84 < /body> 


85 </html> 


该 页 面 运行 的 效果 如 图 6-23 所 示 。 



























































条 加 文章 加 
+ 标题: 
来 源 : EE 
发 布 日 期 : lz2016 年 05 月 24 日 
关键 词 : 
指 壕 : 
自 j98| 区 种 国 予 X 有 多 蚊 昌 | 琶 要 汝 
HA 和 | EE TE 
| 
《内 容 1 
L 至 | 
推荐 位 : 目 首页 推荐 回 首页 置顶 








图 6-23 


(2) 编写 “添加 文章 信息 : 写 和 数据库” 文件 article_add_pass. php, 代 码 如 下 。 


1 <?php 

2 session start (); 

3 require once('session.php'); 

4 require once('../inc/conn.php'); 

5 ?2> 

6 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 


xhtml1/DTD/xhtml1- transitional.dtd"> 
1 <html xmlns= "http://www.w3.0rg/1999/xhtml"> 
8 <head> 
9 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
10 <title>< /title> 
11 </head> 
12 <body> 
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13 <?php 
14 ”/* 处 理 推荐 位 数据 开始 * / 


15 if($_ PosT['posid']<>""){ 


16 foreach( $ POST['posid'] as $i) 
37 { 

18 $posid.=$i.","; 

19 } 

20 $ posid= substr ($ posid, 0,—1); 
2 lelse{ 

22 $posid=""; 

23 } 

24 ”/* 处 理 推荐 位 数据 结束 x* / 

25 

26 $sql="INSERT INTO article (title, comefrom, pubdate, keywords, description, content, 


posid) VALUES('".$_POsT['title']."', '".$_POST['comefrom']."', '".$_POST['pubdate 
.mm.$ POST['keywords']."','".$_POST['description']."','".$_PosT['content']." 
dd 

2 mysql_query ($ sql,$ conn); 

28 ”echo "<script>alert (' 数 据 写 人 成 功 !');window. location.href= 'article add.php';</ 


Script> "7 





29 mysql_close ($ conn) 


30 2> 
31 </body> 
32 </htm> 


(3) 文章 列表 页 article_list. php, 代 码 如 下 。 


pb <?php 

之 session start (); 

3 require once('session.php'); 

4 require once('../inc/conn.php'); 

5 // 记 录 的 总 条 数 

6 $total num=mysql num rows(mysql query("SELECT * FROM article")); 
7 

8 

9 


// 每 页 记录 数 

$ pagesize=10; 

// 总 页 数 
10 $page num=ceil ($total num/$ pagesize); 
11 ”// 设 置 页 数 


12 S$page=$_GET['page']; 
13 if($page<1 || $page==""){ 


14 $page=1; 

15 于 

16 if($page> $page num) { 
有 $ page= $ page_ num; 
18 } 


19 ”// 计 算 记录 的 偏 移 量 
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$ offset=$pagesize* (Spage-1)7 

由 一 页 * 下 一 更 

$prepage= ($page< >1)?$page- 1:$page; 

$ nextpage= ($page< > $page num)?$paget1:$page; 


$result=mysql query ("SELECT * from article order by id desc LIMIT $0offset, 
$pagesize"); 

Sy 

< IDOCTYPE html PUBLIC "~ //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 

xhtml1/DTD/xhtml1- transitional .dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

<title> 无 标题 文档 < /title> 

<link href= "css/table.css" rel= "stylesheet" type= "text/css" /> 

</head> 


<body> 
<table width="100% " border="]1" cellspacing= "0" cellpadding= "0"> 
<tr> 
<td class= "tt" colspan= "5"> 文 章 管理 < /td> 
</tr> 
<tr> 
<td width= "6%$ " height="35"> 文 章 ID< /td> 
<td width= "408 "> 标题 < /td> 
<tad width= "16% "> 发 布 日 期 </ta> 
<td colspan= "2"> 操 作 < /td> 
</tr> 
<“?Php 
if($total num>0){ 
while ($ row=mysql fetch array ($result)){ 
2 
<tr> 
<td height="31"><?php echo $row['id']?></td> 
<td> < ? php echo $ row['title']?><?php if(strpos($ row['posid'], 
'setindex') !== false) {echo "snbsp; &nbsp; [< span style= ' color: red;' 
> 首页 推荐 < /span> ] snbsp; snbsp; ";}if(strpos($ row['posid'], 'settop 
') != = false) {echo "gnbsp; gnbsp; [< span style= 'color: red; '> 首 页 置顶 
</span>]";}?></td> 
<td><?php echo $ row['pubdate']?></td> 
<td width= "12% "> < input type="submit" name= "button" id="button" value= " 修 
改 " onclick= "window.location.href= 'article modify.php?id=<?php echo $row 
Fad12>ow <Ad> 
< td width="11%"> < input type= "submit" name= "button2" id= "button2" 
value=" 删 除 " onclick="window. location. href = 'article delete. php? id= 
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2. 查 
该 操作 主要 是 查询 数据 库 的 article 表 ,并 把 文章 1 


<?php echo $row['id']?>"'" /></td> 
</tr> 
<?2php 
天 
jelset 
?> 
<tr> 
<td height= "35" colspan= "5"> 暂 无 记录 !< /td> 
</tr> 
<?php 
3 
mysql_close ($ conn); 
<tr> 
<td height= "43" colspan= "6" align= "center"> 
<?=$page?>/<?=$page num?> gnbsp; snbsp;<a href="?page=1"> 首 页 < /a> gnbsp; 
&nbsp;< a href="?page=<?=$prepage? >"> 上 一 页 </a> gnbsp; gnbsp;<a href="? 
page=<?=$nextpage?>"> 下 一 页 < /a> gnbsp;&nbsp;<a href="?page=<?=$page num? 
>"> 尾 页 </a> 
</td> 
< /tr> 
</table> 
< /body> 
</html> 


询 输出 文章 信息 列表 





\ 以 列表 的 形式 输出 。 


编写 “文章 信息 列表 页 ”文件 (article_list. php) ,完整 的 代码 如 下 。 


oo pr 


<?Fhp 

session start (); 

require once('session.php'); 

require once("../inc/conn.php"); 

$sql="SELECT * FROM article WHERE id="'".$ _ GET['id']. 
$result=mysql query ($sql); 

$rs=mysql fetch array($ result); 





?> 

< IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

<title>< /title> 

<link rel= "stylesheet" href= "kindeditor/themes/default/default.css" /> 

<link href="css/table.css" rel= "stylesheet" type= "text/css" /> 

<script charset= "utf- 8" src= "kindeditor/kindeditor-min.js">< /script> 
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17 <script charset="utf- 8" src="kindeditor/lang/zh CN.js"></script> 
18 <script> 


3 Var editor; 

20 KindEditor. ready (function (K) 

21 { 

22 editor=K.create ('textarea [name= "content"]' { 

23 allowFileManager: true 

24 Ds; 

25 K('#image3') .click (function() { 

26 editor.loadPlugin('image', function() { 

27 editor.plugin.imageDialog ({ 

28 showRemote: false, 

29 imageUr1: K("#ur13") .val (), 

30 clickFn: function (url, title, width, height, border, 
align) { 

31 K('#url3') .val (url); 

32 editor.hideDialog(); 

33 } 

34 D); 

35 Ds; 

36 D); 

37 Ds; 

38 </script> 

39 </head> 

40 

41 <body> 


42 < form id= "forml" name= "forml" method= "post" action= "article modify pass.php?id=<? 
=$rs['id']?>"> 


43 <table width="100% " border="1" cellspacing="0" cellpadding= "0"> 

44 <tr> 

45 <td class= "tt" colspan= "2"> 修 改 文章 </td> 

46 <*> 

47 <tr> 

48 <tdwidth="12% " height= "35"> < span style= "color:#F30"> * < /span> 标 题 : 
</td> 

49 < td width="88% "> < input name="title" type="text" id="title" value="<?= 

$rs['title']?>" size="50" /></td> 

50 </tr> 

51 <tr> 

52 <tqd height="31"> 来 源 : < /td> 

53 < td> < input name="comefrom" type="text" id="comefrom" value="<?=$rs[' 


comefrom']?>" /></td> 


54 </tr> 
驶 <tr> 
56 <tqd height= "29"> 发 布 日 期 : < /ta> 
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< td> < input name="pubdate" type="text" id="pubdate" value="<?= $rs 
['pubdate']?>" /></td> 
</tr> 
<tr> 
<td height="60"> 关 键 词 : < /td> 
<td>< label for="keywords">< /label> 
< textarea name= "keywords" cols="60" rows="3" id= "keywords"><?=$rs ['keywords']? 
> 
< /textarea>< /td> 
</tr> 
<tr> 
<td height= "60"> 描 述 : </td> 
<td>< label for="description">< /label> 
< textarea name="description" id="description" cols="60" rows="3"><?=$rs[" 
description']?> 
< /textarea>< /td> 
</tr> 
<tr> 
<td height="243">< span style= "color:#F30"> * </span> 内 容 : < /td> 
< td> < textarea name="content" style= "width: 800px; height: 300px; visibility: 
hidden;"><?=htmlspecialchars($ rs['content'])?> 
< /textarea>< /td> 
</tr> 
*tr> 
<td height="33"> 推 荐 位 : < /td> 
<td> 
< ?Php 
$ posid array=explode(",",$ rs['posid']); 
rg 
< input name= "posid[]" type= "checkbox" id= "posid" value= "setindex" < 
?php if(in array ("setindex", $ posid array)) {echo "checked= ' checked 
"ep 
首页 推荐 snbsp; gnbsp; < input name="posid[]" type="checkbox" id= 
"posid" value= "settop" < ?php if (in array ("settop", $ posid array)) {echo " 
checked= 'checked'";}?> /> 
置顶 
</td> 
</tr> 
天 本 
<td height= "43" colspan= "2"> < input type= "submit" name= "Submit" value= "提交 " />< 
/td> 
</tr> 
</table> 
</form> 
</body> 
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93 </html> 


该 页 面 运行 的 效果 如 图 6-24 所 示 。 





















































文章 管理 

文章 m 标题 发 布 日 期 操作 
的 [首页 推 ”2015 年 12 月 21 日 FF WR 
人。 种 标 要 生 有 标题 生 各 村上 间 标 是 首页 椎 。 201s 年 12 有 2 日 = 
3 ard adh te stilts [首页 推 。 201s 年 12 月 21 日 E32 Ca 
2 人 sz 二 

3 行业 新 闻 标 题 行业 新 闻 标题 行业 新 闻 标 题 行业 新 闻 标 题 201S 年 12 月 21 晶 个 次 [3 
3 行业 新 闻 标 题 行业 新 闻 标 题 行业 新 闻 标 是 行业 新 闻 标 题 2015 年 12 月 21 日 [把 改 | [WW ] 
35 。。。 行 站 新 闻 标 题 行 JL 新 闻 标 是 行 尼 新 闻 标 是 行业 新 闻 标 是 2z01s 年 12 朋 2! 日 EE EE 
3 公司 新 闻 标 题 公司 新 闻 标 题 公司 新 闻 标题 公司 新 闻 标 是 201S 年 12 月 21 晶 修改 [A 
31 公司 新 闻 标 题 公司 新 闻 标 题 公司 新 闻 标 题 2015 年 12 月 21 日 [ 纺 改 ] [三 际 ] 
30 公司 新 闻 标 题 公司 新 闻 标 题 公 司 新 闻 标 题 2015 年 12 月 21 日 [ 俱 改 [而 际 | 

1/2 首页 上 一 页 下 -页 展 页 








图 6-24 


3. 修改 文章 信息 
(1) 编写 “修改 文章 信息 : 显示 页 ”文件 article_modify. php ,代码 如 下 。 


<?Php 

session start (); 

require once('session.php'); 

require once("../inc/conn.php"); 

$sql="SELECT * FROM article WHERE id="'".$ GET["id']."""; 
$result=mysql query($ sq1); 

$rs=mysql fetch array($ result); 

< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtmll- transitional.dtd"> 

10 <html xmlns= "http://www.w3.org/1999/xhtml"> 

如 <head> 


Dovwaoumwnb P 


12 <meta http- equiv= "Content- Type" content= "text/htmL; charset=utf- 8" /> 
3 <title></title> 

14 <link rel= "stylesheet" href= "kindeditor/themes/default/default.css" /> 
15 <link href- "css/table.css" rel= "stylesheet" type= "text/css" /> 

16 <scTript charset= "utf- 8" src= "kindeditor/kindeditor-min.js"></script> 
17 <script charset= "utf- 8" src= "kindeditor/lang/zh CN.js">< /script> 

18 <script> 


19 var editor; 

20 KindEditor.ready (function (K) 

21 { 

22 editor=K.create('textarea [name= "content"]', { 
23 allowFileManager: true 


166 


工作 任务 6 网 站 后 台 开 发 





D; 
K('#image3') .click (function() { 
editor.loadplugin('image', function() { 
editor.plugin. imageDialog ({ 
showRemote: false, 
imageUr1: K('#ur13') .val (), 
clickFn: function (url, title, width, height, border, 
align) { 
K('#url3') .val (url); 
editor.hideDialog(); 


Ds; 


Ds; 
D; 
</script> 
< /head> 


<body> 
< form id= "forml" name= "forml" method= "post" action= "article modify pass.php?id=<? 
=$rs['id']?>"> 
<table width= "100% " border="]1" cellspacing="0" cellpadding= "0"> 
<tr> 
<td class= "tt" colspan= "2"> 修 改 文章 < /td> 
</tr> 
<tr> 
<td width= "12% " height="35">< span style="color:#F30"> * </span> 标 题 : < /td> 


<td width= "88% ">< input name= "title" type= "text" id="title" value= "<?=$rs[ 
'title']?>" size="50" /></td> 
</tr> 
<tr> 
<td height= "31"> 来 源 : < /td> 
<td> < input name="comefrom" type="text" id="comefrom" value="<?=$rs[' 
comefrom']?>" /></td> 
</tr> 
<tr> 
<tqd height= "29"> 发 布 日 期 : < /ta> 
< td> < input name="pubdate" type="text" id="pubdate" value="<?= $rs 
['pubdate']?>" /></td> 
</tr> 
<tr> 
<tqd height="60"> 关 键 词 : < /td> 
<td>< label for= "keywords">< /label> 
< textarea name="keywords" cols="60" rows="3" id=" keywords"> <?= $rs 
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['keywords']?> 
< /textarea>< /td> 
</tr> 
<tr> 
<tqd height="60"> 描 述 : < /td> 
<td>< label for="description">< /label> 
< textarea name= "description" id= "description" cols="60" rows="3"> <?=$rs[" 
description']?> 
< /textarea>< /td> 
</tr> 
<tr> 
<td height= "243">< span style= "color:#F30"> * </span> 内容: < /td> 
< td> < textarea name="content" style="width:800px;height: 300px; visibility: 
hidden;"><?=htmlspecialchars ($ rs['content'])?> 
</textarea>< /td> 
</tr> 
<tr> 
<td height="33"> 推 荐 位 : < /td> 
<td> 
< ?php 
$ posid array=explode(",",$ rs['posid']); 
2> 
< input name= "posid[]" type= "checkbox" id= "posid" value= "setindex" < 
?php if(in array ("setindex", $ posid array)) {echo "checked= ' checked 
“yes 
首页 推荐 snbsp; snbsp; < input name="posid[]" type="checkbox" id= "posid" 
value= "settop" <?php if(in array ("settop",$ posid array)) {echo "checked="' 
checked'";}?> /> 
置顶 
</td> 
< /tr> 
<tr> 
<td height= "43" colspan= "2"><input type= "submit" name= "Submit" value= "提交 " 
/></td> 
< /tr> 
</table> 
</form> 
</body> 
</html> 


该 页 面 运 行 的 效果 如 图 6-25 所 示 。 
(2) 编写 “修改 文章 信息 : 修改 页 ”文件 article_modify_pass. php ,代码 如 下 。 
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<?Php 
session start (); 


require once('session.php'); 
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推荐 位 : 郧 首页 推荐 如 置顶 





证 新 闻 标题 行 二 新 闻 标题 行 站 新 闻 标 是 行业 新 闻 标 | 
3 

lo15 年 12 月 2 人 日 

茶叶 








各 叶 











和 IRI 总 国术 | 于 要 性 国 上 三 二 强 玉 r 人 ORI 
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require once('../inc/conn.php'); 
?> 
< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title></title> 
</head> 
<body> 
<“?Php 
/* 处 理 推荐 位 数据 开始 * / 
if($_POsT['posid']<>""){ 

foreach( $_POST['posid'] as $i) 

和 

$posid.=$1.","; 

} 

$ posid= substr ($ posid, 0,—1); 
和 
elsef 

$posid=""; 
k 
/* 处 理 推荐 位 数据 结束 * / 
$sql="UPDATE article set title='".$ POsT['title']."', comefrom= '".$_POST ['comefrom 
"]."', pubdate= '".$ POST['pubdate']."', keywords= '".$ POST ['keywords ']."" 
description="'".$_POST['description']."',content="".$_POST['content ']."',posid= "". 
$posid."' WHERE id="'".$ GET["id']."""; 








mysql query($ sql,$ conn); 
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echo "< script>alert(" 修 改 成 功 !…) :window-location.href- 'article list.php';</script 
Sy 

mysql_close ($ conn); 

洁 

< /body> 

</html> 


4. 删除 文章 信息 
编写 "删除 文章 信息 页 ”文件 (article_delete. php) ,该 文件 的 主要 作用 是 删除 数据 表 中 
id 字段 的 值 等 于 传递 过 来 的 id 变量 值 的 记录 。 该 文件 完整 的 代码 如 下 。 


1 <?php 

2 session start(); 

require once('session.php'); 

4 ?> 

< IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 

6 <html xmlns= "http://www.w3.org/1999/xhtml"> 

了 <head> 

8 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

9 <title></title> 

10 </head> 

11 <body> 

12 <?2php 

13 require once('../inc/conn.php'); 

14 $sql= "DELETE FROM article WHERE id="'".$ GET["id’]."'"; 

15 mysql query($ sql,$ conn); 

16 echo "< script > alert (' 删 除 成 功 ');window. location. href= 'article_list. php' 

</script>"; 

17 mysql_close($ conn); 

18 

19 < /body> 

20 </html> 

【知识 讲解 】 


1. 关于 date_default_timezone_set ( ) 函数 

该 函数 用 于 在 脚本 中 设置 所 有 日 期 /时 间 函 数 的 默认 时 区 。PHP 5 后 都 要 自己 设置 时 
区 ,要么 修改 php. ini 的 设置 ,要 么 在 代码 里 修改 。 

(1) 在 php. ini 中 设置 时 区 的 代码 如 下 : 


date.timezone= PRC 


(2) 在 代码 中 设置 时 区 的 方法 如 下 : 


date default timezone set("Rsia/Shanghai'"); // "asia/Shanghai' 亚 洲 / 上 海 
date default timezone set ("Asia/Chongqing'); // 其 中 asia/chongqing' 为 “亚洲 /重庆 ” 
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date default timezone set('PRC'); // 其 中 PEC 为 "中华 人民 共和 国 ” 

ini_set ('date.timezone', 'Etc/GMT- 8'); 

ini set('date.timezone', 'PRC'); 

ini set ('date.timezone', 'Asia/Shanghai'); 

ini set('date.timezone', 'Asia/Chongqing'); 

以 上 七 种 方法 ,任意 一 种 都 可 以 满足 需求 。 系 统 初始 化 时 ,加 上 “ini_set('date. timezone', 
'Asia/Shanghai") ;或 date_default_timezone_set("PRC");” 语 句 ,就 可 以 解决 时 区 相差 8 小 
时 的 问题 。 

2. 关于 date ( ) 函数 

该 函数 用 于 对 日 期 或 时 间 进 行 格 式 化 ,使 其 更 易 读 , 语 法 格式 如 下 : 


date (format, timestamp) 


其 中 format 为 必需 的 , 它 规定 时 间 戳 的 格式 。Timestame 为 可 选 的 ,用 于 规定 时 间 戳 。 默 
认 是 当前 时 间 和 日 期 。date() 函数 的 格式 参数 是 必需 的 ,它们 规定 如 何 格式 化 日 期 或 时 
间 。 以 下 列 出 了 一 些 常用 于 日 期 的 字符 : 

d: 表示 月 里 的 某 天 (01 一 31) 。 

m: 表示 月 (01 一 12) 。 

Y: 表示 年 (四 位 数 ) 。 

1: 表示 周 里 的 某 天 。 

其 他 字符 ,比如 “/”. ”或 “一 ”也 可 被 插入 字符 中 ,以 增加 其 他 格式 。 

下 面 的 例子 用 三 种 不 同方 法 格式 化 今天 的 日 期 : 


<?php 

echo "今天 是 ". date ("Y/m/d") . "<br>"; 
echo "今天 是 ". date ("Y.m.d"). "<br>"; 
echo "今天 是 ". date("Y-m-d") . "<br>"; 
echo "今天 是 ". date ("1"); 

二 


输出 的 结果 为 
今天 是 2016/05/30 
今天 是 2016.05.30 


今天 是 2016- 05- 30 
今天 是 Monday 


3. 关于 复 选 框 checkbox 值 的 传递 
PHP 的 checkbox 取 值 方式 跟 其 他 语言 有 点 不 同 , 其 值 是 以 数组 的 形式 传递 的 ,例如 有 
如 下 代码 。 


< form method= "post" action= "checktest .php"> 
<input name= "test []" type= "checkbox" value= "ln /> 
< input type="checkbox" name= "test[]" value="2" /> 
< input type="checkbox" name= "test[]" value="3" /> 
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< input type= "checkbox" name= "test[]" value= "4" /> 
< input type= "checkbox" name= "test[]" value="5" /> 
<input type= "submit" name="submit" value= "submit" /> 
</form> 
注意 上 面 input 的 name 属性 ,各 个 属性 内 容 都 一 样 ,而 且 都 是 test[ ], 加 上 [ ] 的 原因 
在 于 让 test 的 内 容 可 以 按 数组 形式 传递 。 输 出 内 容 时 只 需要 利用 implode 函数 将 数组 内 容 
转化 为 字符 串 即 可 。 该 功能 可 在 删除 多 记录 等 场合 运用 ,例如 : 


DELETE FROM tb]l WHERE ID in(implode(",",$ POST['test'])) 


4. 关于 in_array ( ) 函 数 
该 函数 搜索 数组 中 是 否 存在 指定 的 值 ,如 果 在 数组 中 找到 值 则 返回 true, 否则 返回 
false。 其 语法 格式 如 下 : 


in_array (search,array, type) 


。 search: 必需 。 规 定 要 在 数组 中 搜索 的 值 。 

。 array: 必需 。 规 定 要 搜索 的 数组 。 

。 type: 可 选 。 如 果 该 参数 设置 为 true, 则 in_array() 函数 检查 搜索 的 数据 与 数组 的 
值 的 类 型 是 否 相 同 。 

5. 关于 explode ( ) 函 数 

该 函数 把 字符 串 打 散 为 数组 ,其 语法 格式 如 下 : 


explode (separator, string, LIMIT) 


。 separator: 必需 。 规 定 在 哪里 分 割 字符 串 。 
。 string: 必需 。 要 分 割 的 字符 串 。 
。 LIMIT: 可 选 。 规 定 所 返回 的 数组 元 素 的 数目 。 可 能 的 值 如 下 : 
名 大 于 0: 返回 包含 最 多 LIMIT 个 元 素 的 数组 。 
名 小 于 0: 返回 包含 除了 最 后 的 LIMIT 个 元 素 以 外 的 所 有 元 素 的 数组 。 
名 0: 返回 包含 一 个 元 素 的 数组 。 
6. 关于 implode ( ) 函 数 
该 函数 用 于 把 数组 元 素 组 合 为 字符 串 , 其 语法 格式 如 下 : 
implode (separator, array) 
其 中 separator 参数 是 可 选 的 ,规定 数组 元 素 之 间 放 置 的 内 容 ,默认 是 ""( 空 字符 串 ); 
array 参数 是 必需 的 ,要 组 合 为 字符 串 的 数组 。 
例如 
<?php 
$arr=array('Hello', 'World!', 'I', 'love', 'Shanghai!'); 
echo implode (" ",$arr)."<br>"; 
入 和 
输出 的 结果 如 下 : 
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Hello World! I love Shanghai! 


7. foreach 循环 语句 的 应 用 
foreach 循环 只 适用 于 数组 ,并 用 于 遍历 数组 中 的 每 个 键 / 值 对 ,其 语法 格式 如 下 : 


foreach ($array as $value) { 
code to be executed; 
} 


每 进行 一 次 循环 兴 代 ,当前 数组 元 素 的 值 就 会 被 赋值 给 $ value 变量 ,并 且 数 组 指针 会 
逐一 地 移动 ,直到 到 达 最 后 一 个 数组 元 素 。 以 下 的 例子 演示 的 循环 将 输出 给 定数 组 
($ colors) 的 值 : 


<?php 
$ colors=array ("red", "green", "blue", "yellow"); 
foreach ($ colors as $value) { 


echo "$value <br>"; 


党 交 
输出 的 结果 为 : 


red 
green 
blue 
yellow 


68 开发 产品 管理 模块 


该 模块 主要 由 添加 产品 信息 .查询 输出 产品 信息 列表 、 修 改 产品 信息 和 删除 产品 信息 四 
种 功能 组 成 ,以 下 将 详细 讲解 每 种 功能 的 实现 方法 。 

1. 添加 产品 信息 

(1) 编写 “添加 产品 信息 : 表单 页 ”文件 produce_add. php, 代 码 如 下 。 


<?pPhp 

Session start (); 

require once('session.php'); 

require once("../inc/conn.php"); 

?> 

< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional.dtd"> 

汪 <html xmlns= "http://www.w3.org/1999/xhtml"> 

8 <head> 


ao ww mb 


9 <meta http- equiv= "Content- TYpe" content= "text/html; charset=utf- 8" /> 
10 <title>< /title> 


173 


项 目 驱 动 式 PHP 动态 网 站 开发 实 训 教程 





174 


46 


47 
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50 
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<1link rel= "stylesheet" href=- "kindeditor/themes/default/default.css" /> 
<link href="css/table.css" rel= "stylesheet" type= "text/css" /> 

<script charset= "utf- 8" src= "kindeditor/kindeditor-min.js"></script> 
kindeditor/lang/zh CN.js">< /script> 





<script charset= "utf-— 8" src=" 
<script> 
var editor; 
KindEditor. ready (function (K) 
{ 
editor=K.create ('textarea[name="content"]', { 
allowFileManager: true 
Ds; 
K('#image3') .click (function() { 
editor.loadPlugin('image', function() { 
editor .plugin.imageDialog ({ 
showRemote: true, 
imageUrl: K('#url3') .val (), 
clickFn: function(url, title, width, height, border, align) { 
K('#url3') .val (url); 
editor .hideDialog(); 


Ds; 
</script> 
</head> 


<body> 
< fom id= "forml" name= "forml" method= "post" action= "produce add pass.php"> 
<table width= "100%" border= "1" cellspacing= "0" cellpadding= "0"> 
<tr> 
<td class="tt" colspan= "2"> 添 加 产品 < /td> 
</tr> 
<tr> 
<td width="]2% " height= "35">< span style= "color:#F30"> * </span> 标 题 : < /td> 


<td width= "88% ">< input name= "title" type= "text" id= "title" size="50" />< /td 
和 

</tr> 

<tr> 
<tq height="31"> 来 源 : < /td> 
< td> < input name= "comefrom" type= "text" id= "comefrom" value= "本 站 " /></ 
td> 


</tr> 
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<tr> 
<td height= "29"> 发 布 日 期 : </td> 
<td><input name= "pubdate" type= "text" id= "pubdate" value="< ?php 
date default timezone set('UTC'); 
echo date(Y 年 m 月 d 日 ); 
?2>" /></td> 
</tr> 
<tr> 
<td height="31">< span style= "color:#F30"> x < /span> 缩 略图 : < /td> 
<td> < input name= "thumbnail" type= "text" id= "url3" value="" /> 
< input type= "button" id= "image3" value= "选择 图 片 " /> 
(建议 大 小 为 70* 70)< /td> 
</tr> 
<tr> 
<td height="60"> 关 键 词 : < /td> 
<td>< label for="keywords">< /label> 


< textarea name= "keywords" cols="60" rows="3" id= "keywords"> < /textarea> < /td 


> 

</tr> 

<tr> 
<tad height="60"> 描 述 : < /td> 
<td><label for="description">< /label> 


<textarea name= "description" id= "description" cols="60" rows= "3"> < /textarea 


></td> 
</tr> 
<tr> 
<td height= "333">< span style= "color:#F30"> * </span> 内容: < /td> 


<td> < textarea name="content" style="width: 800px; height: 300px; visibility: 


hidden;">< /textarea>< /td> 
</tr> 
<tr> 
<td height="33"> 推 荐 位 : < /td> 


< td> < input name= "posid[]" type= "checkbox" id= "posid" value= "setindex" / 


> 


首页 推荐 snbsp; snbsp;<!- - < input name="posid[]" type="checkbox" id= 


"posid" value= "settop" /> 
置顶 --></td> 

</tr> 

<tr> 


<td height= "43" colspan= "2"> < input type= "submit" name= "Submit" value= "提交 " />< 


/to> 
</tr> 
</table> 


</form> 
</body> 
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入 </html> 
































添加 产品 
* 标 题 : 
发 市 期: 
+ 纺 具 图 : 远 重 间 | 议 大 小 为: Too) 
关键 词 : 
4 
描述 : 
如 
自 | 机 和 | 疡 加 器 DOD| 蜂 要 性 六 二 到 至 "D8| 
和 
+ 内 容 : 
推荐 位 : 日 首页 推荐 
到 








图 6-26 


(2) 编写 “添加 产品 信息 : 写 和 数据库” 文件 produce_add_pass. php ,代码 如 下 。 


1 <?php 

2 session start (); 

3 require once('session.php'); 

4 require once('../inc/conn.php'); 

5 2> 

6 < !DOCTYPE html PUBLIC "~ //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 

7 <html xmlns= "http://www.w3.org/1999/xhtml"> 

8 <head> 


<meta http- equiv= "Content- TYPe" content= "text/html; charset=utf- 8" /> 
10 <title></title> 


11 </head> 

Eb <body> 

13 <?php 

14 if($_POsT['title']==""){ 

15 echo "< script>alert ("标题 不 能 为 空 !') ;history.go(-1)</script>"; 
16 exit; 

时 弟 

18 if($_POsT['thumbnail']==""){ 

19 echo "< script>alert (' 缩 略图 不 能 为 空 !1') ;history.go(-1)</script>"; 
20 exit; 

至， 妆 
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if($_POsT['content']=="") { 
echo "< script>alert ("内 容 不 能 为 空 !1') ;history.go(-1)</script>"; 
exit; 

} 

/* 处 理 推荐 位 数据 开始 * / 

if($ POsT['posid']<>""){ 

foreach( $_POST['posid'] as $i) 

{ 

$posid.=$1i.","; 

} 

$ posid= substr ($posid,0,-—1); 

Jelse{ 

$posid=""; 
. 
/* 处 理 推荐 位 数据 结束 * / 


$ sql =" INSERT INTO produce (title, comefrom, pubdate, thumbnail, keywords, 
description, content, posid) VALUES ('".$ PosT['title']."','".$ PosT[' 
Comefrom']."','".$_POST['pubdate']."','".$ _POsST['thumbnail']."','". 
$_POST['keywords']."','".$ _POST['description’]."','".$ _POST['content 
,ms$ posid."') "; 

mysql_query ($ sql,$ conn); 

echo "< script>alert (' 写 人 成 功 !1') ;window.location.href= 'produce list.php';</script 

pa 

mysql_close ($ conn); 

E 

< /body> 

</html> 


2. 查询 输出 产品 信息 列表 
该 操作 主要 是 查询 数据 库 的 produce 表 , 并 把 产品 信息 以 列表 的 形式 输出 。 
编写 “产品 信息 列表 页 ”文件 (produce_list. php) ,完整 的 代码 如 下 。 


<?php 
session start (); 
require once('session.php'); 
require once('../inc/conn.php'); 
// 记 录 的 总 条 数 
$ total num-mysql num rows(mysql query ("SELECT * FROM produce")); 
// 每 页 记录 数 
$ pagesize=10; 
// 总 页 数 
$page num= ceil ($ total num/$ pagesize); 
// 设 置 页 数 
$page=$_GET['page']; 
if($page<1 || $page==""){ 
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$page=1; 


if($page> $page num) { 
$ page=$ page_num; 
} 
// 计 算 机 记录 的 偏 移 量 
$ offset=$pagesize* ($page- 1); 
// 上 一 页 \ 下 一 页 
$prepage= ($page< >1)?$page- 1:$page; 
$nextpage= ($page< > $page num)?$paget1:$page; 
$result= mysql query ("SELECT * FROM produce order by id desc LIMIT $offset, 
$pagesize"); 
?> 
< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
<link href= "css/table.css" rel= "stylesheet" type= "text/css" /> 


</head> 
<body> 
<table width="100$ " border="]1" cellspacing="0" cellpadding= "0"> 
<tr> 
<td class= "tt" colspan="5"> 产 品 列 表 < /td> 
</tr> 
ES 
<td width= "6% " height="35"> ID< /td> 
<td> 标 题 < /td> 


<td width= "29% "> 发 布 日 期 </td> 
<td colspan= "2"> 操 作 < /td> 
< /tr> 
<?php 
if($total num>0){ 
while ($ row=mysql fetch array ($result)){ 
?> 
<tr> 
<td height="31"><?php echo $ row['id']?></td> 
<td><?php echo $ row['title']?><?php if (strpos ($ row['posid'], 'setindex') != 
=false) {echo "gnbsp; snbsp; [< span style= 'color:red; '> 首 页 推荐 < /span> ] gnbsp; 
gnbsp;";}?>< /td> 
<td><?php echo $ row['pubdate']?></td> 
< td width="12%"> < input type="submit" name="button" id="button" value= 
"路 改 "onclickr "window. location. href= 'produce_modify. php? id= <?php echo 
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57 
58 
59 
60 
61 
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63 
64 
65 
66 
67 
68 


$row["id']?>"'" /></td> 
<td width="11% ">< input type="submit" name= "button2" id="button2" value=" 删 
除 " onclick= "window.location.href- 'produce delete.php?id=<?php echo $row[' 
id']?>"'" /></td> 
</tr> 
<?Php 
下 
Jelse{ 
3 
<tr> 
<td height= "35" colspan= "5"> 暂 无 记录 !< /td> 
</tr> 
<?php 
} 
mysql_close ($ conn); 
?> 
<tr> 
<td height="43" colspan= "5" align= "center"><?=$page?>/<?=$page_ 
num? > gnbsp; gnbsp; < a href="?page=1"> 首 页 < /a> gnbsp; gnbsp; <a href= 
"2?page=<?=$prepage? >"> 上 一 页 </a> gnbsp; snbsp; < a href="?page= <?= 
$nextpage?>"> 下 一 页 </a> gnbsp;snbsp;<a href="?page=<?=$page num?>"> 尾 页 </a></ 
toa> 
</tr> 
</table> 
< /body> 
</html> 


该 页 面 运行 的 效果 如 图 6-27 所 示 。 


标题 发 布 日 期 
产品 ! [首页 推荐 ] 2018 年 04 月 10 日 


产品 2 [首页 推荐 ] 112016 年 04 月 10 日 
171 首页 上 -页 下 一 页 尾 页 





图 6-27 


3. 修改 产品 信息 
(1) 编写 “修改 产品 信息 : 显示 页 ”文件 produce_modify. php ,代码 如 下 。 


wa www 


<?Php 
session start (); 
require once('session.php'); 


require once("../inc/conn.php"); 


// 查 询 当 前 记录 
$ sql="SELECT * FROM produce WHERE id="'".$ GET['id']."""; 
$result—mysql query($ sql); 
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9 $ rs=mysql fetch array($ result); 
10 2> 
11 < IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 
对 <html xmlns= "http://www.w3.org/1999/xhtml"> 
33 <head> 
14 <meta http- equiv= "Content- Type" content="text/html; charset=utf- 8" /> 
15 <title></title> 
16 <link rel="stylesheet" href= "kindeditor/themes/default/default .css" /> 
17 <linkhref="css/table.css" rel="stylesheet" type="text/css" /> 
< script charset= "utf- 8" src="kindeditor/kindeditor-min.js">< /script> 
< script charset= "utf- 8" src="kindeditor/lang/zh CN.js">< /script> 
<script> 
Var editor; 
KindEditor.ready (function (K) 
{ 
editor=K.create ('textarea[name= "content"]', { 


allowFileManager: true 


只 局 忆 电 昌 甩 电台 号 
ATL POOvw®m 


Ds; 


这 K('#image3') .click(function() { 

28 editor.loadPlugin('image', function() { 

29 editor.plugin.imageDialog ({ 

30 showRemote: true, 

31 imageUr1: K('#url3') .val (), 

32 clickFn: function (url, title, width, height, border, 
align) { 

33 K('#url3') .val (url); 

34 editor .hideDialog(); 

35 } 

36 Ds; 

37 ]) 7 

38 ]) 7 

39 Ds; 


40 </script> 
41 </head> 


43 <body> 
44 <fom id="forml" name="forml" method= "post" action="produce modify pass.php?id=<? 


=$rs['id']?>"> 


45 <table width="100% " border="1" cellspacing="0" cellpadding= "0"> 
46 <tr> 

47 <td class="tt" colspan= "2"> 修 改 产品 < /td> 

48 </tr> 

49 <tr> 

50 <td width= "12s" height= "35"> < span style= "color:#F30"> * < /span> 标 题 : 
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< /td> 
<td width= "88s "><input name= "titlen type= "text" id- "titlen value="<?=$ rs[" 
title']?>" size="50" /></td> 
< /tr> 
<tr> 
<tqd height="31"> 来 源 : < /td> 
< td> < input name="comefrom" type="text" id="comefrom" value="<?=$rs[" 
comefrom']?>" /></td> 
</tr> 
<tr> 
<td height="29"> 发 布 日 期 : </td> 
<td> < input name= "pubdate" type= "text" id="pubdate" value="<?=$rs ['pubdate 
Wes Sz 
</tr> 
<tr> 
<td height="31">< span style= "color:#F30"> * < /span> 缩 略图 : < /td> 
<td><input name= "thumbnail" type= "text" id= "url3" value="<?=$ rs ['thumbnail 


gs 

<input type= "button" id="image3" value= "选择 图 片 " />< /td> 
</tr> 
<tr> 


<td height="60"> 关 键 词 : < /td> 
<td>< label for="keywords">< /label> 
< textarea name="keywords" cols="60" rows="3" id="keywords"> <?= $rs 
['keywords']?>< /textarea>< /td> 
</tr> 
<tr> 
<td height="60"> 描 述 : < /td> 
<td>< label for="description">< /label> 


< textarea name= "description" id= "description" cols="60" rows= 





description']?>< /textarea>< /td> 
</tr> 
<tr> 
<td height="325">< span style= "color:#F30"> x </span> 内容: < /td> 
< td> < textarea name="content" style="width: 800px; height: 300px; visibility: 
hidden;"><?=htmlspecialchars ($ rs['content'])?> 
< /textarea>< /td> 
</tr> 
<tr> 
<tqd height="33"> 推 荐 位 : < /td> 
<td> 
<?php 
$posid array- explode (",",$ rs['posid']); 
?> 


< input name= "posid[]" type=" checkbox" id= "posid" value=" 
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setindex"<?Fhp if (in array ("setindex", $posid array)) {echo "checked= 'checked 




















"yy /> 
88 首页 推荐 
89 
90 </td> 
91 A 
92 <tr> 
93 <td height= "43" colspan= "2"> < input type= "submit" name= "Submit" value= "提交 " /> 
</td> 
94 </tr> 
95 </table> 
96 </fom> 
Wr < /body> 
98 </htm> 
该 页 面 运行 的 效果 如 图 6-28 所 示 。 
修改 产品 
+ 标题 : 产品 2 
来 源 : 11 本 站 EE 
发 布 日 期 : 。 “|1120165 年 04 月 10 日 
+ 忽略 图 : iaocaladminikindedit( | 选择 图 片 











1 





关 








措 述 ; 








和 | 区 训 卫 SE 避 训 病 | 而 曾 曾 曾 记 证 生 业 WD si 
CEST TTP? TE Ei 
112016 年 04 月 20 日 开始 接受 报名 视 管 舞 2016 年 04 月 20 日 开始 接受 报名 启 
铀 入 短 2016 年 04 月 20 日 开始 接受 报 名 扩 管 舞 2016 征 04 月 206 开 始 接受 因 

"内容 : 报名 油管 舞 2016 年 04 月 20 日 开始 接受 报名 搞 管 舞 2016 年 04 月 20 日 开始 
接受 报名 往 管 舞 2016 年 04 月 20 日 开始 接受 报名 往 管 舞 2016 年 04 月 20 晶 
开始 接受 报名 往 管 舞 2016 年 04 月 20 日 开始 接受 报名 铀 管 舞 2016 年 04 月 
20 日 开始 接受 报名 油管 舞 2016 年 04 月 20 日 开始 接受 报名 纲 管 舞 2016 年 ~ 


* 首页 推荐 

















图 6-28 


(2) 编写 “修改 产品 信息 : 修改 页 ”文件 produce_modify_pass. php ,代码 如 下 。 


<?php 

session start(); 

require once('session.php'); 
require once('../inc/conn.php'); 
?> 


ao mw 


< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional.dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 


-J 


<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
10 <title>< /title> 
11 </head> 
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40 
41 


42 
43 
44 
45 


<body> 
<?php 
if($_POST['title']=="") { 
echo "< script>alert ("标题 不 能 为 空 !') ;history.go(-1)</script>"; 





exit; 
} 
if($_POST['thumbnail']==""){ 
echo "< script>alert (' 缩 略图 不 能 为 空 !1') ;history.go(-1)</script>"; 
exit; 
E 
if($_POsT['content']==""){ 
echo "< script>alert ("内容 不 能 为 空 !') ;history.go(-1)</script>"; 


exit; 


/* 处 理 推荐 位 数据 开始 * / 
if($_POST['posid']<>""){ 
foreach( $_POST['posid'] as $i) 
{ 
$posid.=$i.","; 
’ 
$ posid= substr ($posid,0,—1); 
} 
else{ 
$posid=""; 
} 
/* 处 理 推荐 位 数据 结束 * / 
$sql ="UPDATE produce set title= '".$ _POST['title']."', comefrom= '".$ _ POST 
['comefrom']."', pubdate = '".$ _ POST [' pubdate ']." ', thumbnail = .$ _ PosT 
['thumbnail']."', keywords= '".$ __POST[' keywords ']."', description= '".$ POST[' 
description']."',content="'".$_POST['content']."',posid="'".$ posid."' WHERE id="'".$_ 
GET['id'].""; 
mysql_query ($ sql,$ conn) ; 
echo "< script>alert ("修改 成 功 !1') :window.location.href= 'produce_list.php';</script 


Ea 











mysql_close ($ conn); 
3 

</body> 

</html> 


4. 删除 产品 信息 
编写 “删除 产品 信息 页 ”文件 (produce_delete. php) ,该 文件 的 主要 作用 是 删除 数据 表 中 
id 字段 的 值 等 于 传递 过 来 的 id 变量 值 的 记录 。 该 文件 完整 的 代码 如 下 。 


a 
多 


<?Php 


session start(); 
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3 require once('session.php'); 

4 2% 
< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www-w3.org/TRV 
xhtml1/DTD/xhtmL1- transitional .dtd"> 


6 <html xmlns= "http://www.w3.org/1999/xhtml"> 

7 <head> 

8 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8"/> 
2 <title></title> 

10 </head> 

11 <body> 

12 <?php 


13 require once('../inc/conn.php'); 

14 $ sql= "DELETE FROM produce WHERE id="'".$ GET["id']."""; 

EE mysql_query($ sql,$ conn); 

16 echo"< script > alert (' 删 除 成 功 ! ');window. location. href= 'produce_list. php' 
</script>"; 

by mysql_close ($ conn); 

18 ?> 

19 < /body> 

20 </htm> 


【知识 讲解 】 


关于 字符 串 的 截取 

在 开发 应 用 程序 的 过 程 中 ,经 常会 用 到 字符 串 的 截取 功能 ,常用 的 函数 有 substr( )、 
mb_substr( ) 和 mb_substr( ) ,以 下 为 读者 讲解 使 用 时 的 注意 事项 。 

@ 在 英文 字符 下 使 用 substr( ) 没 问题 ,在 有 中 文 状态 下 使 用 该 函数 就 可 能 出 现 乱 码 。 

解决 办 法 : 一 个 中 文字 符 占 3 字 节 ,所 以 可 以 利用 这 个 规律 。 例 如 : 


substr(' 测 试 内 容 ',0,3) ,substr ("测试 内 容 ',0,6) 、substr ("测试 内 容 ',0,12) 


只 要 substr() 的 第 三 个 参数 是 3 的 倍数 就 没 问题 ! 

这 样 做 虽然 程序 的 执行 效率 会 增加 ( 相 比 mb_substrO 〇 函数 ), 但 是 必须 要 保证 截取 的 
字符 串 中 全 为 中 文 ,包括 符号 都 要 用 中 文 模式 下 的 符号 。 只 要 出 现 了 一 个 英文 字符 或 者 符 
号 甚至 空格 ,就 会 出 现 乱码 。 所 以 这 个 函数 应 慎 用 。 

@ mb_substr( ) 函数 执行 效率 不 高 ,但 是 对 中 文 处 理 很 有 效 。 

解决 办 法 : mb_substr 函数 会 把 英文 .中 文 以 及 所 有 字符 都 当 作 一 个 大 的 单位 来 对 待 。 
但 是 必须 要 指定 第 四 个 参数 ,例如 mb_substr( "测试 内 容 ” ,0,3,utf-8) 。 官 方 文档 说 第 四 个 
参数 可 以 不 加 ,但 是 在 测试 的 时 候 发 现 如 果 不 加 也 可 能 会 出 现 乱码 。 

@ mb_strcut( ) 与 substr( ) 函 数 都 是 按 字 节 截取 内 容 , 但 是 mb_strcut() 会 判断 截取 
的 最 后 字符 是 不 是 一 个 完整 的 字符 ,如 果 不 完整 就 会 直接 去 除 。 所 以 测试 中 返回 的 结果 就 
是 显示 三 次 ,因为 UTF 格式 等 于 3 字 节 。 

当然 ,也 可 通过 自 定义 的 函数 对 中 文 汉字 进行 截取 ,以 下 为 读者 分 享 一 个 PHP 实现 中 
文字 符 串 截取 无 乱码 的 方法 。 代 码 如 下 。 
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<2php 
// 此 函数 完成 带 汉字 的 字符 串 的 截取 


function substr_CN($ str,$mylen){ 


} 


$ len= strlen($ str); 
$ content=""; 
$ count=0; 
for($i=0;$i<$1len;$i++){ 
if (ord (substr ($ str,$i,1))>127){ 
$ content.=substr($ str,$ i,2); 
EF 
Jelse{ 
$ content.=substr($ str,$i,1); 
} 
if(++$count==$mylen){ 
break; 








} 


echo $ content; 


$str="34 中 华人 民 共和 国 56"; 
substr_CN($ str,3);// 输 出 34 中 


> 


69 开发 留言 管理 模块 


该 模块 主要 是 管理 客户 的 留言 信息 ,并 可 设置 该 留言 信息 是 否 已 处 理 。 
1. 设计 留言 列表 页 
该 页 (guestbook. php 文件 ) 完 整 的 代码 如 下 。 


<?Php 
session start (); 
require once('session.php'); 
require once('../inc/conn.php'); 
// 记 录 的 总 条 数 
$ total num=mysql num rows(mysql query ("SELECT * FROM guestbook")); 
// 每 页 记录 数 
$ pagesize= 5; 
// 总 页 数 
$page num=ceil ($total num/$ pagesize); 
// 设 置 页 数 
$page=$_GET['page']; 
if($page<1 || $page==""){ 
$page=1; 
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if($page>$ page num) { 
$ page=$ page_num; 
} 
// 计 算 机 记录 的 偏 移 量 
$ offset=$pagesize* ($page-1); 
// 上 一 页 .下 一 页 
$prepage= ($page< >1)?$page- 1:$page; 
$nextpage= ($page< > $page num)?$ paget 1:$page; 
$result=mysql query ("SELECT * FROM guestbook order by id desc LIMIT $offset, 
$pagesize"); 
?> 
< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.orgVTR/ 
xhtml1/DTD/xhtmll1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
<link href="css/table.css" rel="stylesheet" type= "text/css" /> 
</head> 
<body> 
<table width= "100% " border= "1" cellspacing="0" cellpadding= "0"> 
<tr> 
<td class= "tt" colspan= "7"> 留 言 列表 < /td> 
</tr> 
<tr> 
<td width="]3%" height= "29">< strong> 标 题 </strong>< /td> 
<td width= "11%"><strong> 日 期 </strong>< /td> 
<td width="11%$"><strong> 留 言 人 </strong>< /td> 
<td width= "8%$ ">< strong> 联 系 方式 < /strong>< /td> 
<td width= "30$ "><strong> 留 言 内 容 < /strong></td> 
<tqd width="15% ">< strong> 是 否 处 理 </strong>< /td> 
<td width="12% "><strong> 操 作 < /strong>< /td> 
</tr> 
<?php 
if($total num>0){ 
while ($ row=mysql fetch array($ result)){ 
2> 
<tr> 
<td><?php echo $ row['title']?></td> 
<td>< ?php echo $ row['pubdate']?>< /td> 
<td><?php echo $ row['name']?></td> 
<td><?php echo $ row['contact']?>< /td> 
<td><?php echo $ row['content']?>< /td> 
<td><?= $row['deal']?> (<?php if ($row['deal']==' 否 ') {?><a href= 
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78 


该 页 


"guestbook deal.php?deal=yes&id=<?=$row['id"']?>"> 单 击 设置 为 "已 处 理 "< /a 
><?php Jelse{?><a href="guestbook deal.php?deal=nogid=<?= $row['id']?>" 
> 单 击 设置 为 "未 处 理 "</a><?php }?>)</td> 
<td> < input type= "submit" name= "button2" id= "button2" value= "删除" onclick=" 
window.location.href= 'guestbook delete.php?id=<?php echo $row['id']?>'" /> 
</td> 
res 
<?php 
} 
Jelse{ 
2> 
二 4 
<tqd height= "35" colspan= "7"> 暂 无 记录 !< /td> 
</tr> 
<?php 


<tr> 
< td height= "43" colspan= "7" align= "center"> < ?=$page?> /<?=$page 
"? page= 1"> 首页 < /a> gnbsp; &nbal 
="?page=< ?=$prepage? >"> 上 一 页 < /a> gnbsp; gnbsp;< a href="? page= 
< ?= $nextpage?>"> 下 一 页 < /a> gnbsp;&nbsp;<a href="?page=<?=$page num?>"> 尾 页 
</a></td> 
< /tr> 
</table> 
</body> 
</htm> 
<“?Php 
mysql_close ($ conn) 





_num? > gnbsp; &nbsp; < a hre <ahref 





Es 


面 运行 的 效果 如 图 6-29 所 示 。 











日 期 留言 人 联系 方式 留言 内 容 是 否 处 理 操作 
2016-05-05 测试 adfafda 亲 引 处 ”而 到 
2018 年 02 月 01 日 再 出 Eli -bel 

到 时 as 坏处” 国 国 





1/1 首页 ”上 一 页 下 -页 ” 尾 页 
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2. 编写 留言 信息 处 理 页 文件 
该 页 面 (guestbook_deal. php 文件 ) 完 整 的 代码 如 下 。 


<?Php 
session start(); 


require once('session.php'); 
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4 require once('../inc/conn.php'); 
和 ?> 
< IDOCTYPE html PUBLIC "— //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtmll- transitional.dtd"> 
学 <html xmlns= "http://www.w3-org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content="text/html; charset=utf- 8" /> 
10 ”<title> 无 标题 文档 < /title> 
11 <linkhref="css/table.css" rel="stylesheet" type="text/css" /> 
12 </head> 





13 <body> 

14 <?php 

15 if($_GET['deal yes"){ 

16 mysql_ query ("UPDATE guestbook set deal= ' 是 ' WHERE id='".$_GET["id']."'"); 

17 echo "< script>alert(' 已 设置 为 \" 已 处 理 \"!');window.1location.href= 'guestbook.php 
"</script>"; 

18 下 

19 if($_GET['deal']=="no"){ 

20 mysql query ("UPDATE guestbook set deal= ' 否 ' WHERE id='".$_GET['id']."'"); 

21 echo "<script>alert (' 已 设置 为 \" 未 处 理 \"!') ;window.location.href= 'guestbook.php 
3< /3cript> ™» 

22 和 

23 mysql_close ($ conn) 

24 ?> 

25 < /body> 


26 </html> 


3. 编写 留言 删除 页 文件 
该 页 面 (guestbook_delete. php 文件 ) 完 整 的 代码 如 下 。 


<?Php 

session start(); 

require once('session.php'); 

require once('../inc/conn.php'); 

eS ， 

< IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
10 ”<title> 无 标题 文档 < /title> 

11 <link href="css/table.css" rel= "stylesheet" type= "text/css" /> 

2 </head> 

13 <body> 

14 <?2php 

15 $ sql= "DELETE FROM guestbook WHERE id="'".$_GET['id']."""; 
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16 mysql query($ sql,$ conn); 

17 echo "< script> alert (' 删 除 成 功 !');window. location. href= ' guestbook. php'7 
< /script> "; 

18 mysql close($ conn); 

19 ?2> 


20 </body> 
21 </html> 


【知识 讲解 】 


关于 留言 信息 处 理 

留言 信息 主要 是 由 访问 者 在 网 站 前 台 “ 给 我 留言 "页 面 留言 产生 ,为 了 方便 对 留言 信息 
的 管理 ,在 网 站 后 台 的 留言 管理 模块 通常 会 使 用 标记 的 方式 标记 留言 信息 是 否 已 处 理 。 底 
层 实现 的 原理 是 在 设计 留言 信息 表 的 时 候 添加 一 个 字段 deal, 用 于 标记 留言 信息 是 否 被 处 
理 。 在 开发 该 功能 时 ,通过 单 击 * 已 处 理 ? 或 “未 处 理 ? 实 现 修改 留言 记录 deal 字段 的 值 以 达 
到 标识 留言 信息 是 否 处 理 的 效果 ,通过 此 种 方式 可 以 提高 管理 员 管理 留言 信息 的 效率 。 

在 guestbook. php 文件 中 ,对 于 “已 处 理 ”“ 未 处 理 ” 链 接 的 代码 做 简要 的 说 明 。 

<?=$row['deal']?> (<?Php if ($row['deal']==' 否 '){?><a href="guestbook deal.php? deal= 

yes&id=<?=$row["'id']?>"> 单 击 设置 为 "已 处 理 "< /a><?php }else{?><a href= "guestbook deal.php? 
deal=nogid=<?=$row["'id']?>"> 单 击 设置 为 "未 处 理 "< /a><?php }?>) 

由 上 述 的 代码 可 知 , 变 量 是 通过 URL 的 方式 进行 传递 的 ,所 以 在 guestbook_deal. php 
接收 时 应 使 用 全 局 变量 $_GET() 进 行 接收 。 另 外 ,有 些 读 者 对 上 述 代码 中 的 deal= yes 或 
deal 二 no 不 理解 。 为 什么 要 传递 这 两 个 变量 ?其 实在 guestbook_deal. php 文件 中 ,存在 两 
个 功能 操作 代码 块 ,一 个 是 设置 该 留言 为 “已 处 理 ”, 一 个 是 设置 该 留言 为 “未 处 理 ”, 因 此 , 须 
引入 deal 变量 以 判断 执行 的 是 哪个 功能 操作 的 代码 。 


6.10 开发 焦点 幻灯 管理 模块 


该 模块 主要 由 添加 焦点 幻灯 信息 .查询 输出 焦点 幻灯 信息 列表 、 修 改 焦点 幻灯 信息 和 删 
除 焦点 幻灯 信息 四 种 功能 组 成 ,以 下 详细 讲解 每 种 功能 的 实现 方法 。 

1. 添加 焦点 幻灯 信息 

(1) 编写 “添加 焦点 幻灯 信息 : 表单 页 ”文件 ,该 文件 (slide_add. php) 完 整 的 代码 
如 下 。 


<?php 

session start(); 

require once('session.php'); 

?> 

< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TRV 
xhtml1/DTD/xhtml1- transitional.dtd"> 

6 <html xmlns= "http://www.w3-org/1999/xhtml"> 


ww 
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<head> 
中 <meta http- equiv= "Content- Type" content="text/html; charset=utf- 8" /> 
9 <title> 无 标题 文档 < /title> 

10 <link rel= "stylesheet" href="kindeditor/themes/default/default.css" /> 
11 <linkhref="css/table.css" rel="stylesheet" type="text/css" /> 

12 <script charset="utf- 8" src="kindeditor/kindeditor-min.js"></script> 
13 <script charset="utf- 8" src="kindeditor/lang/zh CN.js"></script> 

14 <script> 


15 KindEditor.ready (function (K) { 

16 var editor=K.editor ({ 

17 allowFileManager: true 

18 Ds; 

19 K('#image3') .click (function() { 

20 editor.loadPlugin('image', function() { 

型 editor.plugin.imageDialog({ 

22 ShowRemote: false, 

23 imageUrl: K('#url3') .val (), 

24 clickFn: function(url, title, width, height, border, align) { 
25 K('#url3') .val (url); 

26 editor .hideDialog (); 

27 } 

28 D); 

29 D); 

30 D; 

31 Ds; 

32 </script> 

EE </head> 

34 <body> 

35 < fom name= "foml" id= "forml" action= "slide add pass.php" method= "post" > 

36 <table width= "100% "border= "1" cellspacing= "0" cellpadding= "0"> 

37 <tr> 

38 <td height="41" colspan= "2" class="tt"> 添 加 幻灯 < /td> 

39 </tr> 

40 <tr> 

41 <td width= "10%" height= "35">< span style= "color:#F60"> * </span> 标 题 : < /td> 
42 <td width= "90% ">< input type= "text" name= "title" id= "title" />< /td> 
43 < 

44 <tr> 

45 <tqd height="35"> 链 接 : < /td> 

46 <td>< input type= "text" name="link" id= "link" />< /td> 

47 </tr> 

48 <tr> 

49 <td height= "35"> < span style= "color:#F60"> * </span> 缩 略图 : </td> 
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50 <td> < input name= "thumbnail" type= "text" id="url3" value="" size="20" /> <input 
type= "button" id= "image3" value= "上传" />< /td> 

51 </tr> 

52 <tr> 

53 <td height= "35"> < span style= "color:#F60"> * </span> 排 序 : < /td> 

54 <td><input name= "orderid" type= "text" id= "orderid" size= "10" />< /td> 

55 </tr> 

56 <tr> 

57 < td height="35" colspan="2"> < input type="submit" name="button" id= 

"button" value= "提交 " /></td> 

58 </tr> 

59 </table> 

60 </fom> 

61 < /body> 

62 </html> 

该 页 面 运行 的 效果 如 图 6-30 所 示 。 
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(2) 编写 "添加 焦点 幻灯 信息 : 写 和 数据库" 文件 slide_add_pass. php ,该 文件 完整 的 代 
码 如 下 。 


<?Php 

session start (); 

require once('session.php'); 

require once('../inc/conn.php'); 

?> 

< !DOCTYPE html PUBLIC "~ //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtml1/DTD/xhtmll1- transitional .dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 


ao mw wb 


<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
10 ”<title> 无 标题 文档 </title> 
a < /head> 


12 <body> 

13 <?php 

14 if($_POsT['title']==""){ 

15 echo "< script>alert ("标题 不 能 为 空 !') ;history.go(-1)</script>"; 
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2. 查 


exit; 
} 
if($_POST['thumbnail']=="") { 
echo "< script>alert (' 缩 略图 不 能 为 空 !') ;history.go(-1)</script>"; 
exit; 
} 
if(!is numeric($ POST['orderid'])){ 
echo "< script>alert ("排序 必须 为 数字 !') ;history.go(-1)</script>"; 
exit; 
} 
$ sql add= "INSERT INTO slide (title, link, thumbnail, orderid) VALUES ('".$ POsT[' 
EE A 
['orderid'] ."')"; 
mysql_query ($ sql_add,$ conmn); 
echo "< script > alert (' 添 加 成 功 ! '); window. location. href='slide_ list.php'; 
</script>"; 
mysql_close ($ conn); 
?> 
</body> 
</html> 


询 输 出 焦点 幻灯 信息 列表 


该 操作 主要 是 查询 数据 库 的 slide 表 , 并 把 焦点 幻灯 信息 以 列表 的 形式 输出 。 
编写 “焦点 幻灯 信息 列表 页 ”文件 slide_list. php, 完 整 的 代码 如 下 。 


<?Php 
session start (); 
require once('session.php'); 
require once('../inc/conn.php'); 
// 记 录 的 总 条 数 
$total num=mysql num rows(mysql query("SELECT * FROM slide")); 
// 每 页 记录 数 
$ pagesize= 5; 
// 总 页 数 
$page num= ceil ($ total num/$ pagesize); 
// 设 置 页 数 
$page=$_GET['page']; 
if($page<1 || $page=="'"){ 
$page=1; 
} 
if($page> $ page num) { 
$ page= $ page_num; 
// 计 算 机 记录 的 偏 移 量 
$ offset=$pagesize* ($page-1); 
// 上 一 页 、 下 一 页 
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$prepage= ($page< >1)?$page- 1:$page; 
$nextpage= ($page< > $page num)?$ paget+1:$page; 

$result= mysql query ("SELECT * FROM slide order by id desc LIMIT $ offset, 
对 





$ pagesize 
< !DOCTYPE html PUBLIC "— //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtmll1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
<link href="css/table.css" rel= "stylesheet" type= "text/css" /> 
< script type= "text/javascript"> 
function AutoResizeImage (maxWidth,maxHeight,objImg) { 
Var img=new Image()7 
img.src= objImg.src; 
Var hRatio; 
Var wRatio; 
Var Ratio=1; 
Var w= img.width; 
Var h= img.height; 
wRatio=maxWidth / w; 
hRatio=maxHeight / h; 
if (maxWidth==0 && maxHeight==0){ 
Ratio=1; 
Jelse if (maxWidth==0){// 
if(hRatio<1) Ratio=hRatio; 
J}else if (maxHeight==0){ 
if (wRatio<1) Ratio=wRatio; 
Jelse if (wRatio<1 || hRatio<1){ 
Ratio= (wRatio<=hRatio?wRatio:hRatio); 
} 
if (Ratio<1){ 
ww * Ratio; 
h=h * Ratio; 
} 
objImg.height=h; 
objImg.width=w; 
E 
</script> 
</head> 
<body> 
<table width="100%" border= "1" cellspacing="0" cellpadding="0"> 
< 
<td height="41" colspan="5" class="tt"> 





幻灯 列表 < /td> 
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93 
号 
95 
96 


</tr> 
> 
<tqd height="35"> 标 题 < /td>< td> 链 接 < /td>< td width: 
> 排序 < /td> <td width="15% "> 操作 < /td> 





"26% "> 缩 略 图 < /td>< td 


</tr> 
<tr> 
<?php 

if($total num> 0){ 

while ($row=mysql fetch array($ result)){ 
?> 


<td width= "38%" height="70">< ?php echo $ row['title']?></td> 
<tdwidth="13%"><?php if ($row['link']=="'') {echo ' 无 ';}else{?><a target=" 
new" href="<?=$row['link']?>"> 查 看 </a><?php }?></td> 
<td><img src="<?= $row['thumbnail']?>" width="0" height="0" onload=" 
AutoResizeImage (0, 60,this)">< /td> 
<td width="8%"><?=$row['orderid']?></td> 
<td><input type="submit" name="button" id="button" value=" 修 改 " onclick=" 
window.location. href = ' slide modify. php? id= <?= $row ['id']?>'" /> 
Snbsp; Enbsp; 
< input type= "button" name= "button2" id= "button2" value= "删除 "onclick 
= "window.location.href= 'slide delete.php?id-<?=$row["id’]?>"'" /> </td> 
</tr> 
<?php 
} 
Jelse{ 
六 
<tr><td height="41" colspan="5"> 暂 无 记录 !< /td>< /tr> 
<?php 
} 
2 
< 
< td height= "43" colspan= "5" align= "center"><?=$page?>/<?=$page 
_num? > gnbsp; gnbsp;< a href="?page=1"> 首 页 < /a> &nbsp; gnbsp; <a href 
? page= 
< ?= $nextpage?>"> 下 一 页 </a> gnbsp; snbsp;<a href="?page=<?=$page_num?>"> 尾 
页 </a></td> 
< /tr> 
</table> 
< /body> 
</html> 
<?php mysql close($ conn);?> 





?page=< ?=$prepage? >"> 上 一 矶 < /a> gnbsp; gnbsp;<a href= 
四 $ "> 上 一 页 < /a> snb: nb: href: 


上 述 代码 第 32 一 59 行 的 主要 作用 是 设置 该 页 中 的 图 片 等 比 缩放 ,否则 图 片 的 尺寸 不 一 
样 , 输 出 的 图 片 可 能 会 出 现 变形 的 情况 。 
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该 页 面 运 行 的 效果 如 图 6-31 所 示 。 








焦点 幻灯 列表 
标题 衬 接 排序 操作 
bannerl 无 10 
banner2 无 20 
1/! 首页 上 -页 下 -页 “ 展 页 














图 6-31 


3. 修改 焦点 幻灯 信息 
(1) 编写 “修改 焦点 幻灯 信 
如 下 。 





<?Fhp 

session start (); 

require once('session.php'); 

require once('../inc/conn.php'); 

$sql="SELECT * FROM slide WHERE id="'".$ GET["id']."'"; 
$result=mysql query($ sql); 

$row=mysql_ fetch array($ result); 

2 


ownaouomwnb 


xhtmll/DTD/xhtml1- transitional .dtd"> 
10 <html xmlns= "http://www.w3.org/1999/xhtml"> 
鱼 <head> 
12 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
13 ”<title> 无 标题 文档 < /title> 
14 <link rel="stylesheet" href= "kindeditor/themes/default/default.css" /> 
5 <1link href="css/table.css" rel="stylesheet" type="text/css" /> 
16 <script charset= "utf- 8" src= "kindeditor/kindeditor-min.js">< /script> 
17 <script charset= "utf- 8" src= "kindeditor/lang/zh CN.js">< /script> 
18 <script> 


19 KindEditor.ready (function (K) { 

20 Var editor=K.editor ({ 

及 allowFileManager: true 

22 D; 

23 K('#image3') .click (function() { 

24 editor.loadPlugin('image', function() { 

25 editor.plugin.imageDialog ({ 

26 showRemote: false, 

27 imageUr1: K('#url13') .val (), 

28 clickEn: function (url, title, width, height, 
align) { 

29 K('#ur13"') -val (url); 


显示 页 ”文件 slide_modify. php, 该 文件 完整 的 代码 


< !DOCTYPE html PUBLIC "~ //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 


border, 
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editor.hideDialog(); 


D; 
D; 
D; 
D; 


</script> 

</head> 

<body> 

< form name= "forml" id= "forml" action= "slide modify pass.php?id=<?=$row ['id']?>" 
method= "post" > 


<table width= "100$" border="1" cellspacing- "0" cellpadding= "0"> 
<tr> 
<td height="41" colspan="2" class= "tt"> 修 改 焦点 幻灯 < /td> 
</tr> 
<tr> 
<td width= "14% " height="35">< span style= "color:#F60"> x </span> 标 题 : < /td> 


<td width= "86% "><input name= "title" type= "text" id="title" value= "<?=$row 
['title']?>" /></td> 
</tr> 
<tr> 
<td height="35"> 链 接 : < /td> 
<td><input name="link" type= "text" id="link" value="< ?=$ row['link']?>" /> 
</td> 
< /tr> 
<tr> 
<td height= "35"> < span style= "color:#F60"> * </span> 缩 略图 : < /td> 
<td> < input name="thumbnail" type="text" id="url3" value="<?= $row 
['thumbnail']?>" size="20" /> <input type="button" id="image3" value=" 上 
传 " />< /ta> 
</tr> 
<tr> 
<td height= "35"> < span style= "color:#F60"> * </span> 排 序 : < /td> 
<td>< input name= "orderid" type= "text" id= "orderid" value="< ?=$ row ['orderid 
']?>" size="10" />< /td> 
</tr> 
<tr> 
< td height="35" colspan="2"> < input type="submit" name="button" id= 
"button" value= "提交 " />< /td> 
</tr> 
</table> 


</form> 
</body> 
</html> 
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该 页 面 运 行 的 效果 如 图 6-32 所 示 。 





ner1 
[iaocatadminandeditd [上 上午 | 
Be |] 

















图 6-32 


(2) 编写 “修改 焦点 幻灯 信息 一 修改 页 ”文件 slide_modify_pass. php, 该 文件 完整 的 代 


码 如 下 。 


ao ww Nb PP 


<?php 
session start(); 
require once('session.php'); 
require once('../inc/conn.php'); 
?> 
< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtmll/DTD/xhtml1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
</head> 
<body> 
<?php 
if($_POST['title']==""){ 
echo "< script>alert (' 标 题 不 能 为 空 1') ;history.go(-1)</script>"; 
exit; 
} 
if($_POST['thumbnail']==""){ 
echo "< script>alert (' 缩 略图 不 能 为 空 !') ;history.go(-1)</script>"; 
exit; 
| 
if(!is numeric($ POST['orderid'])){ 
echo "< script>alert ("排序 必须 为 数字 !') ;history.go(-1)</script>"; 
exit; 
} 
$sql_ modify= "UPDATE slide set title='".$ POST['title']."',link="'".$_POST['link']." 
',thumbnail='".$_POST['thumbnail']."',orderid="'".$_POST ['orderid']."' WHERE id="". 
$_GET["id']."""; 
mysql query($ sql modify,$ conn); 
echo "< script > alert (' 修 改 成 功 ! ');window. location. href= 'slide_ list.php'; 
</acript>"» 


197 


项 目 驱动 式 PHP 动态 网 站 开发 实 训 教程 





mysql_close ($ conn) ; 
2> 

< /body> 

</html> 


4. 删除 焦点 幻灯 信息 
编写 “删除 焦点 幻灯 信息 页 "文件 slide_delete. php ,该 文件 的 主要 作用 是 删除 数据 表 中 
id 字段 的 值 等 于 传递 过 来 的 id 变量 的 值 的 记录 。 该 文件 完整 的 代码 如 下 。 


1 <?php 

session start (); 

入 require once('session.php'); 

4 ?> 

a < IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 

6 <html xmlns= "http://www.w3.org/1999/xhtml"> 

7 <head> 

8 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

9 <title></title> 

10 < /head> 

11 <body> 

12 <?php 

13 require once('../inc/conn.php'); 

14 $ 3ql= "DELETE FROM slide WHERE id="'".$_GET['id']."'"; 

15 。 mysql query($ sql,$ conn); 

16 ”echo "<script>alert ("删除 成 功 ') ;window.location.href='slide list.php'< /script>"; 

pb mysql_close ($ conn); 

18 Fs 

19 </body> 

20 </html> 

【知识 讲解 】 

关于 图 片 缩放 特效 


图 片 缩放 特效 是 网 页 开发 相关 人 员 常 用 的 网 页 特效 ,以 下 给 大 家 介绍 几 款 免费 的 
jQuery 图 片 缩放 插件 ,详细 见 表 6-3。 











表 6-3 
插件 名 称 说 明 
记 EasyZoom 是 一 个 jQuery 图 像 缩放 和 平移 插件 。 它 支持 触摸 屏 设备 , 且 能 用 CSS 来 
2 设计 想 要 的 效果 
卫生 zoom. js 是 一 款 灵巧 的 jQuery 图 像 缩放 插件 。 单 击 图 片 即 可 进行 放大 /缩小 。 更 有 
趣 的 是 ,只 要 滚动 鼠标 即 可 查看 过 去 浏览 过 的 图 片 
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续 表 





插件 名 称 说 明 





picZoomer 是 一 个 非常 小 的 jQuery 插件 ,通过 鼠标 光标 县 停放 大 图 像 ,同时 支持 缩 略 








picZoomer 图 实现 导航 。 可 以 在 电子 商务 网 站 使 用 该 插件 创建 一 个 产品 浏览 页 面 ,也 允许 访问 
者 通过 缩 略 图 查看 产品 的 不 同 照片 , 且 支 持 单独 放大 照片 

ia 二 jQuery Zoom 是 一 个 易于 使 用 的 jQuery 图 像 缩放 插件 ,可 以 通过 单 击 、 抓 取 动作 和 切 

?| 换 动作 来 实现 图 像 的 缩放 

i WM Zoom 能 够 在 图 像 中 创建 一 个 放大 镜 , 并 在 旁边 显示 其 高 清晰 度 的 图 像 。 此 外 ， 


它 内置 了 一 个 变焦 功能 , 当 鼠 标 光标 悬 停 在 图 像 上 时 能 够 放大 图 像 





elevateZoom 


Elevate Zoom 提供 了 两 种 图 像 缩 放 模式 ,一 个 低 分 辨 率 的 可 见 光 图 像 和 一 个 高 分 辨 
率 缩放 的 图 像 。 且 它 支持 缩 略图 导航 ,同时 支持 鼠标 悬 停 时 放大 图 像 的 功能 





magnificent. js 


magnificent. js 是 一 个 简单 的 响应 式 插件 ,能 够 提供 两 种 缩放 模式 ， 

模式 1: 内 部 缩放 。 鼠 标 光标 悬 停 时 在 图 像 内 部 显示 放大 后 的 图 像 。 
模式 2: 外 部 缩放 。 显 示 放 大 镜 玻璃 效果 ,以 展示 图 像 的 特定 部 分 。 
也 支持 滚动 鼠标 来 缩放 图 片 





Classy Loupe 


Classy Loupe 是 jQuery 插件 ,能 够 将 光标 变 成 一 个 可 自 定义 的 相机 镜头 。 鼠 标 光 标 
悬 停 时 ,用 户 可 以 查看 图 像 特定 部 分 的 详细 信息 





以 上 的 插件 ,请 读者 自行 到 网 上 下 载 并 学 习 、 使 用 。 


6.11 


开发 QQ 客服 管理 模块 


该 模块 主要 由 添加 QQ 客服 信息 ,查询 输出 QQ 客服 信息 列表 、 修 改 QQ 客服 信息 和 删 
除 QQ 客服 信息 四 种 功能 组 成 ,以 下 将 详细 讲解 每 种 功能 的 实现 方法 。 

1. 添加 QQ 客服 信息 

(1) 编写 "添加 QQ 客服 信息 : 表单 页 ”文件 ,代码 如 下 。 


mw mb 


<?Php 

session start (); 

require once('session.php'); 

2> 

< IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 

xhtml1/DTD/xhtmll1- transitional .dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

<title> 无 标题 文档 < /title> 

<link rel= "stylesheet" href= "kindeditor/themes/default/default.css" /> 

< link href="css/table.css" rel= "stylesheet" type= "text/css" /> 

</head> 

<body> 

< form name= "forml" id="forml" action= "qq add pass.php" method= "post" > 
<table width="100%" border="1" cellspacing= "0" cellpadding= "0"> 
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EI 


<tr> 
<td height="41" colspan= "2" class= "tt"> 添 加 QQ 客服 < /td> 
</tr> 
<tr> 
<td width= "13%" height="35"> 标 题 : < /td> 
<td width="87% ">< input type= "text" name="title" id="title" />< /td> 
</tr> 
<tr> 
<td height= "35">< span style= "color:#F60"> * </span> 号 码 : < /td> 
<td>< input type= "text" name= "gqnum" id= "qqnum" />< /td> 
</tr> 
<tr> 
<td height="35"> 客 服 姓 名 : < /td> 
<td> < input name= "truename" type= "text" id= "url3" value="" size= "20" /> 
</td> 
</tr> 
<tr> 
< td height="35" colspan="2"> < input type="submit" name="button" id= 
"button" value= "提交 " />< /td> 
</tr> 
</table> 
< /form> 
< /body> 
</html> 


该 页 面 运行 的 效果 如 图 6-33 所 示 。 























图 6-33 


(2) 编写 “添加 QQ 客服 信息 : 写 和 人 数据库” 文件 qq_add_pass. php, 该 文件 完整 的 代码 
如 下 。 


ao ww Nb PP 


<?php 

session start(); 

require once('session.php'); 

require once('../inc/conn.php'); 

?> 

< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional.dtd"> 

<html xmlns= "http://www.w3-org/1999/xhtml"> 

<head> 
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9 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
10 <title> 无 标题 文档 < /title> 
11 </head> 


12 <body> 
13 <?php 

14 if($_POST['qaqnom']==""){ 

15 echo "< script>alert ("QQ 号 码 不 能 为 空 !') ;history.go(-1)</script>"; 
16 exit; 

17 } 


18 $3ql="INSERT INTO qq(title,qqnum,truename) VALUES('".$ POST['title']."','".$ POST[' 
gqnum'] a "'".$_POST['truename'] ."')"; 

19 mysql_query ($ sql,$ conn); 

20 ”echo "< script>alert(' 添 加 成 功 !') ;window.location.href='qq_list.php';</script 
> 


型 mysql_close ($ conn); 


22 上 
23 </body> 
24 </html> 


2. 查询 输出 友情 链接 信息 列表 
该 操作 主要 是 查询 数据 库 的 qq 表 , 并 把 QQ 客服 信息 以 列表 的 形式 输出 。 





EL <?php 

2 session start (); 

3 require once('session.php'); 

4 require once('../inc/conn.php'); 

5 // 记 录 的 总 条 数 

6 $ total num=mysql num rows(mysql query ("SELECT id FROM qq")); 
7 

8 

学 


// 每 页 记录 数 

$ pagesize=5; 

// 总 页 数 
10 $page_ num= ceil ($ total num/$ pagesize); 
11 ”// 设 置 页 数 


12 $page=$_GET['page']; 
13 if($page<1 || $page==""){ 


14 $page=1; 

15 ’ 

16 if($page> $page num){ 
17 $ page=$ page_num; 
18 } 


19 ”// 计 算 机 记录 的 偏 移 量 
20 $offset=$pagesize* ($page-1); 
2 E 一 页 5 下 一 页 
22 $prepage= ($page<>1)?$page- 1:$page; 
23 $ nextpage= ($page< > $page num)?$paget1:$page; 
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$result= mysql query ( " SELECT * FROM qq order by id desc LIMIT $ offset, 
$ pagesize"); 
?> 
< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional.dtd"> 
<html xmlns= "http://www.w3.org/1999/xzhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
<link href="css/table.css" rel= "stylesheet" type= "text/css" /> 
< /head> 
<body> 
<table width= "100$" border= "1" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="41" colspan= "4" class= "tt">QQR 客 服 列表 < /td> 
</tr> 
<tr> 
<td height= "35"> 标 题 < /td> 
<td>QQ 号 码 < /td> 
<td> 客 服 姓名 < /td><td width="15% "> 操作 < /td> 
</tr> 
<tr> 
<?php 
if($ total num> 0){ 
while ($ row=mysql] fetch array ($result)){ 





3 
<td width="38%" height="44"><?=$ row['title']?></td> 
<td width="13%"><?=$ row['gqnum']?></td> 
<td><?=$row['truename']?>< /td> 
<td>< input type=" submit" name="button" id="button"value=" 修 改 " 
onclick= "window. location. href= 'qg_modify. php? id= <?= $row ['id']?> 'V> 
Snbsp; Snbsp; 
< input type= "button" name= "button2" id= "button2" value=" 删 
除 " onclick= "wingdow.1location. = "qq_delete.php?id=<?=$row['id']?> '"/> 
</td> 
</tr> 
<?php 
} 
Jelse{ 
?> 
<tr><td height="41" colspan= "4"> 暂 无 记录 !< /td>< /tr> 
<?php 
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65 


66 
67 
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22 


<tr> 





< td height= "43" colspan= "4" align= "center">< ?=$page?>/<?=$page 


_num? > gnbsp; gnbsp; < a href="?page=1"> 首 页 < /a> snbsp; &nbsp; < a href 





= "?page=<?=$prepage? >"> 上 一 页 < /a> gnbsp; snbsp;<a href="?page= 
< ?= $nextpage?>"> 下 一 页 < /a> gnbsp; snbsp;<a href="?page=<?=$page num?>"> 尾 页 
</a></td> 

</tr> 
</table> 

< /body> 

</htm> 

<?php mysql_close($ conn);?> 


该 页 面 运行 的 效果 如 图 6-34 所 示 。 





QQ 客 肢 列表 

标题 9 号码 客服 姓名 
技术 支持 240799376 林 龙 健 
业务 咨询 240799376 林 龙 健 





1/4 首页 上 一 页 下 -页 展 页 





图 6-34 


3. 修改 QQ 客服 信息 
(1) 编写 “修改 QQ 客服 信息 : 显示 页 "文件 qq_modify. php, 该 文件 完整 的 代码 如 下 。 


Downamoumwwnb rm 


<?Php 

Session start (); 

require once('session.php'); 

require once('../inc/conn.php'); 

$sql="SELECT * FROM qq WHERE id="'".$_ GET['id']."'"; 
$result=mysql query ($ sql); 

$row=mysql fetch array($ result); 





?> 
< !DOCTYPE html PUBLIC "~ //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtmll- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
<link href="css/table.css" rel= "stylesheet" type= "text/css" /> 
</head> 
<body> 
<form name="forml" id="forml" action="qq modify pass.php?id=<?=$row['id']?>" 
method= "post" > 

<table width= "100% " border= "1" cellspacing= "0" cellpadding= "0"> 

<tr> 
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<td height= "41" colspan= "2" class= "tt"> 修 改 QQ 客服 < /td> 
Ke 
<tr> 
<td width= "13s" height="35"> 标 题 : < /td> 
<ta width="87s"> < input name="title" type="text" id="title" value="<?= 
$row['title']?>" /></td> 
</tr> 
<tr> 
<td height="35"> < span style= "color:#F60"> * </span> 号 码 : < /td> 
<td> < input name= "qqnum" type= "text" id= "qqnum" value="< ?=$row ['qqnum']?>" 
/></td> 
</tr> 
tr> 
<td height="35"> 客 服 姓 名 : < /td> 
<td>< input name= "truename" type= "text" id="url3" value="< ?=$row ['truename 
0?>" size="20" /></td> 
</tr> 
<tr> 
<td height= "35" colspan= "2"> < input type= "submit" name= "button" id= "button" 
value= "提交 " /></td> 
</tr> 
</table> 
< /form> 
< /body> 
</htm> 
<“?Php 
mysql_close($ conn) 


> 


该 页 面 运行 的 效果 如 图 6-35 所 示 。 

















修改 9 客服 

标题: 上 国 t# |] 
+ 号码 ; E40799376 

客服 姓名 : Bt 他 |] 
El 





图 6-35 


(2) 编写 “修改 QQ 客服 信息 : 修改 页 ”文件 qdq_modify_pass. php, 该 文件 完整 的 代码 
如 下 。 


an 内 


<?Ehp 

session start(); 

require once('session.php'); 
require once('../inc/conn.php'); 


时 
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< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www-w3.org/TR/ 
xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- TYpe" content="text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
</head> 
<body> 
<?php 
if($_POST['gqqnum']==""){ 
echo "< script>alert ("QQ 号 码 不 能 为 空 !1') ;history.go(-1)</script>"; 
exit; 
} 
$ sql_modify= "UPDATE qq set title='".$ POsT['title']."', qqnum= '".$_POST ["qgnum']." 
"truename="'".$_ POST['truename']."' WHERE id="'".$_GET["id']. 
mysql_query($ sql_modify,$ conn); 
echo "< script > alert (' 修 改 成 功 ! ');window. location. href= qq_list.php'; 





</script>"; 
mysql_close ($ conn); 
3> 

< /body> 

</html> 


4. 删除 QQ 客服 信息 
编写 "删除 QQ 客服 信息 页 ”文件 qq_delete. php, 该 文件 的 主要 作用 是 删除 数据 表 中 id 
字段 的 值 等 于 传递 过 来 的 id 变量 的 值 的 记录 。 该 文件 完整 的 代码 如 下 。 


<?Php 
session start (); 
require once('session.php'); 
3> 
< !DOCTYPE html PUBLIC "- //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TRV 
xhtml1/DTD/xhtmll- transitional.dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content— Type" content= "text/html; charset=utf- 8" /> 
<title></title> 
</head> 
<body> 
<?php 
require once('../inc/conn.php'); 
$ sql= "DELETE FROM qq WHERE id="'".$_GET["id']."'"; 
mysql query($ sql,$ conn); 
echo "< script > alert (' 删 除 成 功 ');window. location. href='qq_list.php' 
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</script> ”> 
17 。 mysql close($ conn) ; 
18 是 和 
19 </body> 
20 </html> 


【知识 讲解 】 


关于 在 线 客服 

网 站 在 线 客服 或 称 作 网 上 前 台 , 是 一 种 以 网 站 为 媒介 ,向 互联 网 访客 与 网 站 内 部 员工 提 
供 即时 沟通 的 页 面 通信 技术 。 

基于 网 页 会 话 的 在 线 客服 系统 的 出 现代 替 了 传统 的 客服 QQ 在 线 、MSN 在 线 等 的 使 
用 ,虽然 QQ 以 及 MSN 有 些 功能 在 个 人 用 户 的 使 用 上 无 法 蔡 代 ,但 是 网 站 在 线 客服 系统 作 
为 一 个 专业 的 网 页 客服 工具 ,是 针对 企业 网 站 访客 方便 及 时 和 企业 进行 即时 沟通 的 一 款 通 
信 软 件 ,其 良好 的 体验 度 是 无 法 被 替代 的 。 而 且 QQ、MSN 作为 客服 工具 有 一 些 弊端 ,如 需 
安装 软件 ,加 好 友 、 功 能 单一 等 。 此 类 在 线 客服 不 仅仅 是 在 线 客服 ,同时 还 为 网 站 提供 访客 
轨迹 跟踪 、 流 量 统计 分 析 , 客 户 关系 管理 等 功能 ,完全 超越 了 即时 通信 工具 的 功能 。 由 于 互 
联网 的 急速 发 展 ,在 中 国 也 为 越 来 越 多 的 人 所 接受 ,互联 网 已 经 成 为 国内 中 小 企业 的 必 争 之 
地 ,所 以 越 来 越 多 的 在 线 客服 系统 在 功能 趋 于 完善 强大 。 随 着 互联 网 的 不 断 发 展 ,以 及 新 
技术 的 推陈出新 ,在 线 客服 系统 也 迎 来 了 技术 上 的 更 新 ,曾经 困扰 用 户 的 延迟 ,如 今 已 在 网 
络 带宽 不 断 提升 ,以 及 多 线路 云 服务 器 广泛 使 用 的 大 背景 下 ,使 会 话 延迟 得 到 了 根本 的 解 
决 ,大 大 提升 了 网 站 浏览 者 在 咨询 问题 时 的 用 户 体验 。 

(1) 企业 QQ( 注 意 : 企业 QQ 是 收费 的 ) 

企业 QQ 是 腾讯 公司 专 为 中 小 企业 搭建 的 企业 级 即时 通信 工具 。 其 核心 功能 是 帮助 企 
业 进 行内 外 部 的 沟通 ,强化 办 公 管理 。 当 前 很 多 中 小 企业 正在 使 用 企业 QQ。 

“安全 高效, 可 管理 "的 办 公 管 理 理念 ,无 缝 连接 8 亿 QQ 活路 用 户 , 既 满足 了 企业 成 员 
各 种 内 部 通信 的 需要 ,又 最 大 限度 地 满足 了 企业 对 外 联系 的 需求 ,在 实现 企业 即时 通信 模式 
多 样 化 的 同时 ,也 提升 了 企业 即时 通信 的 效率 。 

企业 QQ 主要 包括 企业 账户 中 心 和 客户 端 (包含 PC 及 移动 客户 端 ) 两 部 分 。 

@ 企业 账户 中 心 。 企 业 管理 员 及 获得 企业 管理 员 授权 的 员工 ,可 以 通过 账户 中 心 后 台 
对 企业 组 织 架构 和 企业 成 员 信息 进行 简单 快速 的 部 署 管理 操作 ,并 对 企业 成 员 的 办 公 沟 通 、 
登录 等 行为 及 企业 客户 资料 等 信息 进行 监控 与 管理 。 

@ 客户 端 。 企 业 QQ 拥有 多 平台 客户 端 , 包 含 Windows 客户 端 以 及 iPhone 和 
Android 平台 的 手机 客户 端 ,这 些 客户 端 可 以 使 所 有 企业 员工 进行 内 外 的 沟通 交流 。 

(2) TQ 客服 (注册 后 ,可 以 使 用 其 提供 的 免费 功能 ) 

TQ 公司 (北京 商 之 讯 软 件 有 限 公司 ,www. tq. en) 成 立 于 2002 年 11 月 29 日 ,具有 
家 授权 的 呼叫 中 心 运营 资质 (B 一 2011093)。TQ 专注 于 企业 通信 云 应 用 与 服务 ,是 业 
内 最 大 的 现代 连锁 服务 企业 通信 和 解决 方案 提供 商 ,为 国内 众多 企业 提供 一 体 化 信息 化 解 
决 方案 。 

辆 提示 : 以 上 为 读者 介绍 了 两 种 即时 通信 的 平台 ,在 开发 网 站 的 过 程 中 ,有 些 客户 可 
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能 有 此 需求 。 编 者 建议 : 若 只 需 进 行 简单 的 网 页 会 话 ,推荐 使 用 TQ, 注 册 后 可 以 免费 使 用 
会 话 功能 ,当然 ,其 他 功能 是 需要 收费 的 。 


6.12 开发 友情 链接 管理 模块 


该 模块 主要 由 添加 友情 链接 信息 .查询 输出 友情 链接 信息 列表 修改 友情 链接 信息 和 删 
除 友 情 链接 信息 四 种 功能 组 成 ,以 下 将 详细 讲解 每 种 功能 的 实现 方法 。 

1. 添加 友情 链接 信息 

(1) 编写 “添加 友情 链接 信 





\: 表单 页 ”文件 friend_add. php, 该 文件 完整 的 代码 


如 下 。 
1 <?Ehp 
名 session start ()7 
3 require once('session.php'); 
4 2> 
5 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 
6 <html xmlns= "http://www.w3.org/1999/xhtml"> 
党 <head> 
8 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
9 <title> 无 标题 文档 < /title> 
10 <link href="css/table.css" rel="stylesheet" type= "text/css" /> 
Eb </head> 
12 <body> 
13 < form name= "forml" id= "forml" action= "friend add pass.php" method= "post" > 
14 <table width= "100% " border="1" cellspacing= "0" cellpadding= "0"> 
15 <tr> 
16 <td height="41" colspan= "2" class= "tt"> 添 加 友情 链接 < /td> 
17 </tr> 
18 <tr> 
19 <td width= "16%" height= "35">< span style= "color:#F60"> * < /span> 标 题 : < /td> 
20 <td width="84% ">< input type= "text" name="title" id="title" />< /td> 
21 </tr> 
22 <tr> 
23 <td height="35">< span style= "color:#F60"> * < /span> 链 接地 址 : < /td> 
24 <td>< input type= "text" name= "url" id="url" />< /td> 
25 </tr> 
26 <tr> 
2 <td height="35" colspan="2"> < input type= "submit" name= "button" id= "button" 
value= "提交" /></td> 
28 </tr> 
29 < /table> 
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代码 如 下 。 
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图 6-36 


(2) 编写 “添加 友情 链接 信息 : 写 入 数据库 ?文件 friend_add_pass. php, 该 文件 完整 的 


au ww PP 


my 


<?Fhp 

session start (); 

require once('session.php'); 

require once('../inc/conn.php'); 

2 

< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 


xhtmll/DTD/xhtml1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
</head> 
<body> 
< ?php 
if($_POST['title']==""){ 
echo "< script>alert (' 标 题 不 能 为 空 !') ;history.go(-1)< /script>"; 
exit; 
if($_POST["url']==""){ 
echo "< script>alert (" 链 接地 址 不 能 为 空 ! ') ;history.go(-1)</script>"; 
exit; 
} 
$ sql= "INSERT INTO friend (title,url) VALUES('".$_POST['title']."" 


Dn"; 





".$_POST['ur1']." 


mysql_query ($ sql,$ conn); 

echo "< script> alert (' 添 加 成 功 !') ;window.location.href= 'friend list.php';</script 
pt 

mysql_close ($ conn); 

2 

</body> 

</html> 
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2. 查询 输出 管理 员 信 息 列表 
该 操作 主要 是 查询 数据 库 的 friend 表 , 并 把 友情 链接 信息 以 列表 的 形式 输出 。 
编写 “友情 链接 信息 列表 页 ”文件 (friend_list. php) ,完整 的 代码 如 下 。 


1 <?php 
入 session start (); 

3 require once('session.php'); 

4 require once('../inc/conn.php'); 

5 // 记 录 的 总 条 数 

6 $total num=mysql num rows (mysql query ("SELECT id FROM friend")); 
这 

8 

Ed 


// 每 页 记录 数 

$pagesize= 5; 

// 总 页 数 
10 $page num= ceil ($total num/$ pagesize); 
11  // 设 置 页 数 


12 $page=$_GET['page']; 
13 if($page<1 || $page==""){ 


14 $page=1; 

15 和 

16 if ($page> $ page num { 
Es $page=$ page_num; 
18 } 


19 。” // 计 算 机 记录 的 偏 移 量 

20 $ offset=$pagesize* ($page- 1); 

21 ”// 上 一 页 \ 下 一 页 

22 $ prepage= ($page< >1)?$page- 1:$page; 

23 $nextpage= ($page<>$ page num)?$ paget 1:$ page; 

24 $result= mysql _query ("SELECT * FROM friend order by id desc LIMIT $ offset, 

$ pagesize"); 

25 ?> 

26 < !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtmlL1/DTD/xhtmll- transitional.dtd"> 

ZX <html xmlns= "http://www.w3.org/1999/xhtml"> 

28 <head> 

29 <meta http- equiv= "Content- Type" content= "text/htmL; charset=utf- 8" /> 

30 ”<title> 无 标题 文档 < /title> 

31 <linkhref="css/table.css" rel= "stylesheet" type= "text/css" /> 

32 </head> 

33 <body> 

34 <table width= "100%" border= "1" cellspacing="0" cellpadding="0"> 

35 <tr> 


36 <td height="41" colspan= "3" class= "tt"> 友 情 链接 列表 < /td> 
3 < /tr> 

38 <tr> 

39 <td height= "35"> 标 题 < /td><td> 链 接 < /td> 
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40 <td width="15% "> 操作 < /td> 

41 </tr> 

42 <tr> 

43 <?php 

44 if($total num>0){ 

45 while ($row=mysql fetch array($ result)){ 

46 ?> 

47 <td width="38%" height="39"><?php echo $ row['title']?></td> 

48 <td><?php echo $row['url']?></td> 

49 <td><input type="submit" name= "button" id= "button" value=" 修 改 " onclick=" 
window.location. href= ' friend modify.php?id= <?= $row['id']?>'" /> 
Snbsp; gnbsp; 

50 < input type= "button" name= "button2" id= "button2" value= "删除 "onclick 
= "window.location.href= 'friend delete.php?id=<?=$row['id']?>'"/ 
> </td> 

51 </tr> 

52 <?php 

53 } 

54 Jelse{ 

55 Fea 

56 <tr><td height="41" colspan= "3"> 暂 无 记录 !< /td>< /tr> 

57 <?php 

58 和 

59 2> 

60 <tr> 

61 < td height= "43" colspan= "3" align= "center"> < ?=$page?>/<?=$page 

_num? > &nbsp; snbsp; < a href="? page=1"> 首 页 < /a> gnbsp; &nbsp; < a href 

"?page=< ?=$prepage? >"> 上 一 页 < /a> gnbsp; gnbsp;< a href page= 
<?= $nextpage? >"> 下 一 页 < /a> gnbsp; gnbsp;<a href="?page=<?=$page 
_num? > "> 尾 页 < /a> < /td> 

62 </tr> 

63 </table> 

64 </body> 

65 </htm> 

66 <?php mysql close($ conn);?> 

该 页 面 运行 的 效果 如 图 6-37 所 示 。 

友情 链接 列表 
标题 链接 
XXXX 科 技 http 
171 首页 上 -页 下 -页 ” 必 页 
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3. 修改 友情 链接 信息 
(1) 编写 “修改 友情 链接 信息 : 显示 页 ”文件 ,该 文件 (friend_modify. php) 完 整 的 代码 


如 下 。 


Downaouowmwnb pr 


33 


35 


<?Ehp 
session start(); 
require once('session.php'); 
require once('../inc/conn.php'); 
$sql="SELECT * FROM friend WHERE id="'".$ GET['id']."""; 
$result=mysql query($ sql); 
$row=mysql fetch array($ result); 
2> 
< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 
<html xmlns= "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
<title> 无 标题 文档 < /title> 
<link rel= "stylesheet" href= "kindeditor/themes/default/default.css" /> 
<link href= "css/table.css" rel= "stylesheet" type= "text/css" /> 
</head> 
<body> 
< form name= "forml" id= "forml" action: 
method= "post" > 
<table width= "100%" border="]1" cellspacing="0" cellpadding= "0"> 
<tr> 
<td height="41" colspan= "2" class= "tt"> 修 改 友情 链接 < /td> 
</tr> 
<tr> 
<td width= "13%" height="35">< span style= "color:#F60"> * </span> 标 题 : < /td> 





"friend modify pass.php?id=<?=$row['id']?>" 


<td width= "87%">< input name= "title" type= "text" id= "title" value="< ?=$ row[ 
title']?>" /></td> 

</tr> 

<tr> 
<td height="35">< span style= "color:#F60"> * < /span> 链 接地 址 : < /td> 
<td>< input name= "url" type= "text" id= "url" value="<?=$row['url']?>" 
/> </td> 

</tr> 

<tr> 
<td height="35" colspan= "2"> < input type= "submit" name= "button" id= "button" 
value= "提交" /></td> 

</tr> 

</table> 
</form> 


211 


项 目 驱动 式 PHP 动态 网 站 开发 实 训 教程 





36 </body> 

37 </htm> 

38 <?php 

39 mysql close($ conn) ; 
40 ?> 


该 页 面 运 行 的 效果 如 图 6-38 所 示 。 











图 6-38 


(2) 编写 “修改 友情 链接 信息 : 修改 页 ”文件 


<?php 

Session start(); 

require once('session.php'); 

require once('../inc/conn.php'); 

?> 

< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0org/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 

<html xmlns= "http://www.w3.org/1999/xhtml"> 

<head> 

<meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
10 ”<title> 无 标题 文档 < /title> 


ao ww RD PP 


11 </head> 

12 <body> 

13 <?php 

14 if($_POST['title']==""){ 

15 echo "< script>alert (' 标 题 不 能 为 空 !1') ;history.go(-1)</script>"; 
16 exit; 

1 

18 if($_POsT['url']==""){ 

19 echo "< script>alert ("链接 地 址 不 能 为 空 !') ;history.go(-1)</script>"; 
20 exit; 

列 ; 二 


22 $sql modify="UPDATE friend set title='".$ POST['title']."',url="'".$ POST['ur1']."' 
WHERE id="".$_GET["id']."""; 

23 mysql query($ sql modify,$ conn); 

24 echo "< script> alert (' 修 改 成 功 !');window.location.href= 'friend list.php';</script 
Sm 

25 mysql close($ conn); 

26 ?> 

27 </body> 

212 


工作 任务 6 网 站 后 台 开 发 





28 </html> 


4. 删除 友情 链接 信息 
编写 "删除 友情 链接 信息 ”文件 (friend_delete. php) ,该 文件 的 主要 作用 是 删除 数据 表 
中 id 字段 的 值 等 于 传递 过 来 的 id 变量 值 的 记录 。 该 文件 完整 的 代码 如 下 。 
<?php 


session start (); 


1 
2 
3 require once('session.php'); 
4 2 

5 


< !DOCTYPE html PUBLIC "~ //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtml1- transitional .dtd"> 


6 <html xmlns= "http://www.w3.org/1999/xhtml"> 

7 <head> 

8 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 
Eg <title></title> 

10 < /head> 

11 <body> 

12 <?php 


13 require once('../inc/conn.php'); 

14 $sql= "DELETE FROM friend WHERE id="'".$ GET["id']."'"; 

15 mysql_query ($ sql,$ conn); 

16 echo "< script> alert (' 删 除 成 功 ');window. location.href= 'friend_ list.php' 
</script>"; 

让 人 mysql_close ($ conn); 

18 ?> 


19 </body> 
20 </htm> 


【知识 讲解 】 


关于 友情 链接 

友情 链接 也 称 为 网 站 交换 链接 .互惠 链接 . 互 换 链接 .联盟 链接 等 ,是 具有 一 定 资源 互补 
优势 的 网 站 之 间 的 简单 合作 形式 , 即 分 别 在 自己 的 网 站 上 放置 对 方 网 站 的 Logo 图 片 或 文 
字 的 网 站 名 称 , 并 设置 对 方 网 站 的 超 链接 ( 单 击 后 ,切换 或 弹出 另 一 个 新 的 页 面 ), 使 得 用 户 
可 以 从 合作 网 站 中 发 现 自己 的 网 站 ,达到 互相 推广 的 目的 ,因此 常 作为 网 站 推广 的 基本 
手段 。 

友情 链接 是 指 互相 在 自己 的 网 站 上 放 对 方 网 站 的 链接 。 必 须要 能 在 网 页 代码 中 找到 网 
址 和 网 站 名 称 ,而 且 浏 览 网 页 的 时 候 能 显示 网 站 的 名 称 ,这 样 才 叫 友情 链接 。 

友情 链接 是 网 站 流量 来 源 的 根本 ,比如 一 种 可 以 自动 交换 链接 的 友情 链接 网 站 (每 来 访 
一 个 IP, 就 会 自动 排 到 第 一 ) ,这 是 一 种 创新 的 自助 式 友情 链接 互联 网 模式 。 

通常 来 说 ,友情 链接 交换 的 意义 主要 体现 在 如 下 几 方 面 。 

(1) 提升 网 站 的 流量 。 友 情 链 接 的 好 处 就 是 可 以 通过 互相 推荐 ,从 而 使 网 站 的 权重 提 
升 ,提高 排名 ,增加 流量 ;但 是 过 多 的 友情 链接 就 会 成 为 站 长 们 的 负担 ,也 是 网 站 的 负担 。 
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(2) 完善 用 户 的 体验 。 通 常 来 说 ,友情 链接 交换 都 是 介 于 同行 之 间 , 这 利于 用 户 直接 通 
过 网 站 访问 另 一 个 同行 的 站 点 ,以 便于 更 直接 简单 地 了 解 全 面 的 信息 。 

(3) 增加 网 站 的 外 链接 。 链 接 流 行 度 , 就 是 与 站 点 做 链接 的 网 站 的 数量 ,是 搜索 引擎 排 
名 要 考虑 的 一 个 很 重要 的 因素 。 也 就 是 说 ,站 点 链接 的 数量 越 多 , 它 的 等 级 就 越 高 ,现实 中 
我 们 跟 朋友 才 有 友情 ,网 站 相互 链接 就 是 友情 的 表现 ,这 对 于 搜索 引擎 优化 (SEO) 考 量 外 部 
链接 有 很 好 的 作用 。 

(4) 提升 PR。 这 是 交换 友情 链接 最 根本 的 目的 。 如 果 不 知道 什么 是 PR 值 , 请 看 后 面 
的 名 词 解 释 。 

(5) 提高 关键 字 排名 。 

(6) 提高 网 站 的 权重 。 这 点 很 重要 ,只 有 你 的 权重 高 了 ,搜索 引擎 才 会 重视 你 的 网 站 。 

(7) 提高 知名 度 。 这 是 有 针对 性 的 ,对 于 一 些 特定 的 网 站 和 特定 的 情况 , 才 会 达到 此 效 
果 。 如 一 个 不 知名 的 新 网 站 ,如 果 能 与 新 浪 、sohu、Yahoo、 网 易 、 腾 讯 .3G 网 址 大 全 等 大 的 
网 站 全 都 建立 链接 , 那 肯 定 对 其 知名 度 及 品牌 形象 是 一 个 极 大 的 提升 。 

(8) 吸引 蜘 蛛 疏 行 。 如 果 友 情 链 接 做 得 好 ,能 吸引 蜘蛛 从 高 质量 的 网 站 爬 到 自身 网 站 ， 
使 蜘蛛 形成 朴 行 循环 ,让 引擎 给 自身 网 站 高 的 评价 ,对 网 站 流量 以 及 快照 更 新 有 较 大 的 
帮助 。 

总 之 ,不 论 是 友情 链接 还 是 纯粹 的 外 部 链接 的 建设 ,站 内 优化 的 最 终 目的 是 提高 转 
化 率 。 


6.13 开发 退出 后 台 模 块 


该 模块 的 作用 是 退出 后 台 并 跳 转 到 网 站 的 首页 ,实现 该 功能 的 文件 (loginout. php) 完 
整 代码 如 下 。 
1 <?php session start();?> 


< IDOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0org/TR/ 
xhtmll1/DTD/xhtmll- transitional .dtd"> 


[3] 


E <html xmlns= "http://www.w3.org/1999/xhtml"> 

4 <head> 

5 <meta http- equiv= "Content- Type" content= "text/html; charset=utf- 8" /> 

6 <title>< /title> 

3 < /head> 

8 <body> 

9 <?Ehp 

10 。 session unset() 

11 session destroy(); 

12 echo "< script > alert (' 退 出 成 功 ! '); window. parent. location. href = ' login. php' 
</script>" 

3 2> 

14 </body> 

15 </html> 
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【知识 讲解 】 
关于 session_unset ( ) 和 session_destroy ( ) 函 数 的 使 用 


(1) session_unset() 

该 函数 用 于 释放 当前 在 内 存 中 已 经 创建 的 所 有 $_SESSION 变量 ,但 不 删除 Session 
文件 以 及 不 释放 对 应 的 session id。 

(2) session_destroy() 

该 函数 用 于 删除 当前 用 户 对 应 的 Session 文件 以 及 释放 session id, 内存 中 $_ 
SESSION 变量 的 内 容 仍 然 保留 。 

因此 ,释放 用 户 Session 的 所 有 资源 ,需要 依次 执行 如 下 的 代码 : 


<?php 
$_SESSION['sessionname']=" ”; 
session unset (); 

session destroy(); 

2> 
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(fp ef 


能 够 使 用 相关 的 技术 对 网 站 前 后 台 进 行 整合 。 
。 培养 学 生 吃苦 耐劳 的 品质 ,能 够 按时 完成 设计 及 编程 任务 。 
培养 学 生 的 表达 与 沟通 能 力 ,具有 良好 的 职业 精神 。 
。 培养 学 生 较 强 的 团队 合作 意识 。 


SA 知识 目标 
。 了 解 什 么 是 前 后 台 整 合 。 
。 熟悉 前 后 台 整 合 的 过 程 及 方法 。 
。 掌握 PHP 技术 及 MySQL 技术 在 网 站 前 台 的 应 用 。 
。 掌握 网 站 各 版 位 的 功能 整合 。 


-全 

人 三 任务 描述 

本 工作 任务 主要 是 根据 网 站 前 台 页 面 的 情况 ,使 用 动态 网 站 技术 把 数据 库 相 应 数据 在 
相应 的 版 位 查询 输出 或 把 数据 写 入 数据 库 相应 的 数据 表 等 ,并 能 实现 网 站 后 台 管 理 前 台数 
据 的 效果 ,最 终 达 到 网 站 前 后 台 的 整合 。 

网 站 后 台 的 主要 功能 是 管理 网 站 数据 库 的 信息 ,而 网 站 前 台 则 是 把 数据 库 的 信息 通过 
前 台 的 页 面 输出 ,不 难看 出 ,网 站 的 前 台 和 网 站 的 后 台 是 通过 网 站 数据 库 连 接 起 来 的 。 

对 于 网 站 前 后 台 的 整合 ,在 网 站 建设 行业 并 没有 统一 的 定义 ,但 最 终 达到 的 目的 是 网 站 
能 够 运行 ,并 且 网 站 前 台 的 数据 能 够 通过 网 站 后 台 进 行 管理 与 维护 。 

网 站 的 前 后 台 整 合 前 ,还 需 登 录 网 站 后 台 为 每 个 模块 录入 一 些 数据 ,以 便 在 整合 时 能 够 
控制 输出 的 效果 。 


7.1 整合 网 站 首页 


把 index. html 文件 的 后 级 名 改 为 index. php. 然 后 使 用 Dreamweaver 打开 index. php 
文件 ,并 编写 代码 把 数据 库 的 数据 在 相应 的 版 位 输出 。 
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(1) 页 头 版 位 的 整合 。 首 先 在 页 面 的 最 前 端 引 入 数据 库 链 接 文件 ,并 编写 代码 查询 网 
站 配置 基本 信息 ,从 而 形成 结果 集 $ config ,代码 如 下 。 


<?php 
require once('inc/conn.php'); 

$sql config="SELECT * FROM config"; 
$result config=mysql query($ sql config); 

$ config=mysql fetch array($ result config); 
?> 


页 面 的 title 标签 改 为 如 下 代码 ,并 增加 关键 字 、 页 面 描述 标签 ,代码 如 下 。 


<title><?=$config['site title']?></title> 
<meta name= "keywords" content="< ?=$ config['site keywords']?>"> 
<?=$config['site description']?>"> 


网 站 Logo 的 div 容器 代码 更 改 如 下 。 





<meta name= "description" content= 


<div class="l0go">< img src="<?=$config['site logo']?>" width="141" height= "42" 
> </div> 


网 站 导航 菜单 的 链接 更 改 如 下 。 


<a href= "index.php"> 网 站 首页 < /a> 

<a href= "about .php"> 关 于 我 们 < /a> 

<a href= "article list.php"> 新 闻 动 态 < /a> 

"produce 1ist.php"> 产 品 展示 < /a> 
<a href= "guestbook.php"> 给 我 留言 </a> 

<a href= "contact.pPhp"> 联 系 我 们 </a> 


至 此 ,页 头 版 位 整合 完成 ,此 时 页 头 及 以 上 的 代码 如 下 。 





<ahref= 


入 <?php 

2 require once('inc/conn.php'); 

争 $ sql_config= "SELECT * FROM config"; 

4 $result config=mysql query($ sql_config) 7 

3 $config=mysql fetch array($ result config); 
6 入 

7 < ldoctype html> 

8 <html> 

9 <head> 


10 <meta charset="utf- 8"> 

11 <title><?=$config['site title']?></title> 

12 <meta name="keywords" content="<?=$config['site keywords']?>"> 

13 <meta name="description" content="<?=$config['site description']?>"> 

14 <link href="css/style.css" rel="stylesheet" type="text/css"> 

寻 < link rel=" stylesheet" type="text/css" href="css/jquery. jslides. css" media= 
"screen" /> 


16 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
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17 <script type="text/javascript" src="js/jquery.jslides.js"></script> 


18 < script type=" text/javascript" src="js/jquery. SuperSlide. 2.1.1.js"> 
< /script> 

19 </head> 

20 <body> 


a <!-- 页 头 开始 --> 
22 <div class= "top"> 


23 <div class= "center"> 

24 <div class= "logon><img src="<?=$ config['site logo']?>" width="141" height=" 
42">< /div> 

25 <div class= "menu"> <a href= "index.php"> 网 站 首页 </a><a href= "about.php"> 关 于 


我 们 </a><a href= "article list.php"> 新 闻 动 态 </a> <a href= "produce list.php"> 
产品 展示 < /a> <a href= "guestbook.php"> 给 我 留言 </a> <a href= "contact.php"> 联 系 


我 们 < /a>< /div> 
26 </div> 
27 </div> 


28 ”<!-- 页 头 结束 --> 
(2) 焦点 幻灯 版 位 的 整合 。 该 版 位 的 焦点 幻灯 图 片 主要 是 由 网 站 后 台 焦 点 幻灯 管理 模 


块 管理 ,因此 该 页 面 的 图 片 应 查询 对 应 模块 的 数据 表 的 循环 输出 ,整合 后 的 代码 如 下 。 
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<!-- 焦 点 幻灯 开始 -一 > 
<div id= "full- screen- slider"> 
<ul id="slides"> 
<?Ehp 
$sql slide="SELECT * FROM slide order by orderid asc"; 
$result slide=mysql query($ sql slide); 
while ($row slide=mysql fetch array($ result slide)){ 
人 全 
<1i style= "background:url('<?=$row slide['thumbnail']?>") no- repeat center top"><a 
href="<?=$ row slide['link']?>" target=" blank"><?=$row slide ['title']?></a></ 
1i> 
<?Ehp 
} 
全 洒 
</ul> 
</div> 
<!-- 焦 点 幻灯 结束 -一 > 


(3)“ 新 闻 动 态 .关于 我 们 .最 新 产品 ?形成 的 横向 区 域 版 位 整合 。 对 应 的 代码 如 下 。 
<!--“ 新 闻 动 态 . 关 于 我 们 、 最 新 产品 ”形成 的 横向 区 域 开始 -一 > 


<div class="container"> 
<!-- 新 闻 动态 --> 
<div class= "news"> 
<div class="n top"> 
<div class= "cat title"> 新 闻 中 心 < /div> 





<div class="more"><a href="article list.php"> 更 多 </a></div> 
</div> 
<div class="n center"> < img src= "images/news thurbnail.jpg" width="111" height="90"> 


<div> 
<?php 
$sql settop="SELECT * FROM article WHERE posid= 'setindex, settop' order by id desc 
LIMIT 0,1"7 
$result settop=mysql query($ sql settop); 
$row settop=mysql fetch array($ result settop); 
2> 
< span style= "font- weight :bold;"><?=mb substr ($row settop['title'],0,13, 'utf- 8')? 
></span><br /><?=mb substr ($row settop['content'],0,47, 'utf- 8')?>...[<a href="" 
> 详细 < /a>] 
</div> 
</div> 
<div class="n bottom"> 
<?Ehp 
$sql article="SELECT * FROM article WHERE posid= 'setindex' order by id desc LIMIT 
0,5"; 
$result article=mysql query($ sql article); 
while ($row article=mysql fetch array($ result article)){ 
<a href="article show.php?id=<?=$row article['id']?>"><?=mb_substr 
($row article['title'],0,22, 'utf-8')?></a> 
<?php 


?> 

</div> 

</div> 

<!-- 关 于 我 们 --> 
about"> 





<div class= 
<div class="a top"> 
<div class= "cat title"> 关 于 我 们 < /div> 
</div> 
<div class="a center">< img src="images/about img.jpg" width="381" height= "148">< 
/div> 
<div class="a bottom"> 
<?php 
$sql about="SELECT * FROM single WHERE id=8"; 
$result about=mysql query($ sql about); 
$row about=mysql fetch array($ result about); 
echo mb_substr ($ row about['content'],0,128, "utf- 8'); 
?> 


详细 ] < /div> 
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<div class= "produce"> 
<div class="p top"> 
<div class="cat title"> 最 新 产品 < /div> 
<div class= "more"><a href= "produce 1ist.php"> 更 多 </a></div> 
</div> 
<div class="p bottom"> 
<!-- 这 里 是 产品 缩 略 图 轻 播 效果 - -> 
<div id= "slideBox" class= "slideBoxn> 
<div class= "bd"> 


<ul> 
<?php 
$ sql_produce= "SELECT * FROM produce WHERE posid= ' setindex' order by id desc LIMIT 0, 
555 


$result produce=mysql query($ sql Produce) 
while ($ row produce=mysql fetch array($ result produce)){ 
2 
<1i><a href="produce show.php?id= <?= $row_produce ['id']?>" target= 
" blank">< img src="<?=$ row produce['thumbnail']?>" width="270" height="270" / 


></a></1i> 
奖 惫 
} 
22 
</ul> 
</div> 
</div> 
< script type= "text/javascript"> 
jQuery (". slideBox") . slide ({mainCell:".bd ul", effect:" left", autoPlay: 
true}); 
</script> 
</div> 
</div> 
</div> 


< 上 -新闻 动态 .关于 我 们 ,最 新 产品 ?形成 的 横向 区 域 结束 --> 


(4) 页 尾 版 位 整合 。 找 到 页 尾 的 代码 部 分 ,用 $ config 结果 集 输出 数据 库 信息 的 方式 
替换 相应 的 文本 信息 ,整合 后 的 代码 如 下 。 


<!-- 页 尾 开 始 --> 
<div class= "footer"> 
<div class= "center box"> 
<div class= "text"> 
<?=$config['company name']?><br /> 
电话 : <?=$config['company phone']?> email:<?=$config['company email']?> 
<br /> 
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地 址 : <?=$ config['company address']?><br /> 

技术 支持 : <?=$ config['company copyright']?><br /> 

友情 链接 : <a href 伍 "> 中 国 茶叶 网 < /a> snbsp; snbsp;<a hre 伍 "> 茶 文 艺 网 < /a> 
</div> 
<div class="ewm"> 


<img src="<?=$config['company ewm']?>" alt="" /> 


</div> 
</div> 
</div> 
<!-- 页 尾 结束 --> 


由 上 述 的 代码 得 知 ,友情 链接 的 信息 并 不 是 通过 后 台 的 网 站 基本 配置 管理 的 , 它 是 由 友 
情 链 接管 理 模块 管理 ,因此 在 友情 链接 位 置 查询 友情 链接 数据 表 并 循环 输出 友情 链接 数据 ， 
友情 链接 的 代码 如 下 。 


<?php 
$sql friend="SELECT * FROM friend"; 
$result friend=mysql query($ sql friend); 
while ($row friend=mysql fetch array($ result friend)){ 
尘 奖 
<a href="<?=$row friend['url']?>" target=" blank"><?=$row friend['title']?></a 
> gnbsp; snbsp; 
<?Ehp 
} 
> 


此 时 ,网 站 首页 index. php 页 面 的 代码 如 下 。 


对 <?php 

2 require once('inc/conn.php'); 

3 $sql config="SELECT * FROM config"; 

4 $result config=mysql query($ sql config); 

和 $config=mysql fetch array ($result config); 
6 2 

党 < ldoctype html> 

8 <html> 

Ey <head> 


10 <meta charset= "utf- 8"> 

1 <title><?=$config['site title']?></title> 

12 <meta name= "keywords" content="<?=$ config['site keywords']?>"> 

13 <meta name= "description" content="< ?=$ config['site description']?>"> 

14 <link href="css/style.css" rel="stylesheet" type="text/css"> 

15 < link rel="stylesheet" type="text/css" href="css/jquery. jslides. css" media= 
"screen” /> 

16 <script type= "text/javascript" src="js/jquery-1.8.0.min.js"></script> 

17 <script type= "text/javascript" src="js/jquery.jslides.js"></script> 

18 < script type=" text/javascript" src="js/jquery. SuperSlide. 2.1.1.js"> 
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< /script> 
</head> 
<body> 
<!-- 页 头 开始 --> 
<div class= "top"> 
<div class= "center"> 
<div class= "logon><img src="<?=$ config['site logo']?>" width="141" height=" 
42">< /div> 
<div class="menu"><a href="index.php"> 网 站 首页 </a> <a href="about.php"> 
关于 我 们 < /a><a href="article list.php"> 新 闻 动 态 </a><a href="produce list. 
php"> 产品 展示 </a> < a href="guestbook. php"> 给 我 留言 </a> < a href= 
"contact .php"> 联 系 我 们 < /a>< /div> 
</div> 
</div> 
< !-- 页 头 结束 --> 
< 上 -焦点 幻灯 开始 --> 
<div id= "ful1- screen- slider"> 
<ul id= "slides"> 
< ?php 
$sql slide="SELECT * FROM slide order by orderid asc"; 
$result slide=mysql query($sql slide); 
while ($row slide=mysql fetch array($ result slide)){ 
<1i style="background:url ('<?=$row slide['thumbnail']?>') no- repeat center 
top"><a href="<?=$row_ slide['link']?>" target=" blank"><?=$row_ slide[' 
title']?></a></li> 
<?php 
} 
?> 
</ul> 
</div> 
< 二 -焦点 幻灯 结束 --> 
<!--“ 新 闻 动 态 . 关 于 我 们 .最 新 产品 "形成 的 横向 区 域 开始 --> 
<div class= "container"> 
<!-- 新 闻 动 态 --> 
<div class= "news"> 
<div class="n top"> 
<div class="cat title"> 新 闻 中 心 < /div> 
<div class="more"><a href="article list.php"> 更 多 < /a>< /div> 
</div> 
<div class="n center"> < img src= "images/news_thumbnail.jpg" width= "111" height 
> 
<div> 
<?php 
$sql settop="SELECT # FROM article WHERE posid= ' setindex, settop' order by id 
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desc LIMIT 0,1"; 
$result settop=mysql query($ sql settop); 
$row settop=mysql fetch array ($result settop); 
. 
< span style= "font- weight:bold;"><?=mb substr ($row_ settop['title'],0,13," 
utf- 8')?></span> <br /><?=mb _ substr ($row_settop['content'],0,47, 'utf- 8')? 
>...[<a href=""> 详 细 < /a>] 
</div> 
</div> 
<div class="n bottom"> 
<?php 
$sql article="SELECT * FROM article WHERE posid= 'setindex' order by id desc 
LIMIT 0,5"; 
$result article=mysql query($ sql article); 





while ($row article=mysql fetch array($ result article)){ 


?> 
<a href="article show.php?id=<?=$row article['id']?>"><?=mb_ 
substr ($row article['title'],0,22, 'utf-8')?></a> 
<?Php 
} 
2 
</div> 
</div> 
<!-- 关 于 我 们 --> 


<div class= "about"> 
<div class= "a top"> 
<div class= "cat_title"> 关 于 我 们 < /div> 
</div> 
<div class="a_center">< img src="images/about img.jpg" width="381" height="148" 
></div> 
<div class: 
<?php 
$sql about="SELECT * FROM single WHERE id=8"; 
$result about=mysql query($ sql about); 
$row about=mysql fetch array($ result about); 
echo mb_substr ($ row about['content'] ,0,128, "utf- 8°); 





"a bottom"> 


?> 

-…[ 详 细 ] < /div> 
</div> 
<!-- 最 新 产品 --> 


<div class= "producen> 
<div class="p top"> 
<div class= "cat title"> 最 新 产品 < /div> 
<div class="more"><a href="produce 1ist.php"> 更 多 < /a></div> 
</div> 
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133 


<div class="p bottom"> 
<!-- 这 里 是 产品 缩 略 图 轻 播 效 果 - -> 
<div id= "slideBox" class="slideBox"> 
<div class="bd"> 
<ul> 
<?Php 
$ sql _ produce= "SELECT * FROM produce WHERE posid= 'setindex' order by id desc LIMIT 0, 
5"7 
$result produce=mysql query($ sql produce); 
while ($ row produce=mysql fetch array($ result produce)){ 
a 
<li><a href="produce show.php?id=<?=$row produce['id']?>" target="_ 
blank">< img src="<?=$row produce['thumbnail']?>" width="270" height=" 
270" />< /a></li> 
送 帮 


?> 
</u> 
</div> 
</div> 
< script type= "text/javascript"> 
jQuery(". slideBox") . slide ({mainCell:". bd ul", effect:" left", autoPlay: 
true}); 
</script> 
</div> 
</div> 
</div> 
<!--" 新 闻 动 态 、 关 于 我 们 、 最 新 产品 "形成 的 横向 区 域 结束 -一 > 
< 上 -页 尾 开始 --> 
<div class= "footer"> 
<div class= "center box"> 
<div class= "text"> 
<?=$ config['company name']?><br /> 
电话 : <?= $config [' company _ phone ']?> email: <?= $config 
['company email']?><br /> 
地 址 : <?=$ config['company address']?><br /> 
技术 支持 : <?=$ config['company_copyright']?><br /> 
友情 链接 : <?php 
$sql friend= "SELECT * FROM friend"; 
$result friend=mysql query($ sql friend); 
while ($ row friend=mysql fetch array($ result friend)){ 
?> 
<ahref="<?= $row_ friend ['url']?>" target=" blank"> 
<?=$row friend['title']?>< /a> gnbsp; gnbsp; 
<?php 
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135 二 

136 </div> 

137 <div class="ewm"> 

138 <img src="<?=$ config['company ewm']?>" alt="" /> 
139 </div> 

140 </div> 


141 </div> 
142 <!-- 页 尾 结 束 --> 
143 </body> 
144 </html> 


至 此 ,首页 整合 已 完成 ,由 版 面 的 设计 图 得 知 , 后 续 的 页 面 网 站 的 页 头 、 焦 点 幻灯 和 页 尾 
都 是 一 样 的 ,因此 有 必要 将 其 分 离 出 来 ,然后 使 用 require_onec() 函 数 将 其 引入 即 可 ,这 样 
有 利于 提高 编码 效率 和 后 期 的 维护 工作 。 

把 上 述 文件 的 第 1 一 43 行 代码 剪 切 , 并 粘贴 到 新 建文 件 header. php 中 ,该 文件 的 全 部 
代码 如 下 。 


1 <?php 
2 require once('inc/conn.php'); 

3 $sql_ config="SELECT * FROM config"; 

4 $result config=mysql query($ sql config); 

1] $config=mysql fetch array ($result config); 
6 ?> 

7 < !doctype html> 

8 <html> 

9 <head> 


10 <meta charset="utf- 8"> 
于 <title><?=$config['site title']?></title> 
" 

< 





12 <meta name= "keywords" content: $config['site keywords']?>"> 






13 <meta name= "description" content="< ?=$ config['site description']?>"> 

14 <link href="css/style.css" rel= "stylesheet" type= "text/css"> 

15 < link rel="stylesheet" type="text/css" href="css/jquery. jslides. css" media= 
"screen" /> 

16 < script type= "text/javascript" src="js/jquery-1.8.0.min.js">< /script> 

17 < script type= "text/javascript" src="js/jquery.jslides.js"></script> 


18 < script type=" text/javascript" src="js/jquery. SuperSlide. 2. 1. 1. js" > 
< /script> 
19 </head> 


20 <body> 
21 “<!-- 页 头 开始 --> 
22 <div class="top"> 


23 <div class= "center"> 
24 <div class= "logon><img src="<?=$ config['site 10go']?>" width="141" height=" 
42">< /div> 
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< div class="menu"> <a href="index.php"> 网 站 首页 </a> <a href="about.php"> 
关于 我 们 < /a><a href- "article list.php"> 新 闻 动 态 </a><a href="produce list. 
php"> 产品 展示 </a> < a href="guestbook. php"> 给 我 留言 </a> <a href= 
"contact .php"> 联 系 我 们 < /a>< /div> 
</div> 
</div> 
<!-- 页 头 结束 --> 
< 上 -焦点 幻灯 开始 --> 
<div id- "ful1- screen- slider"> 
<ul id "slides"> 
<?php 
$sql slide="SELECT * FROM slide order by orderid asc"; 
$result slide=mysql query($ sql slide); 
while ($row slide=mysql fetch array($ result slide)){ 
?> 
<1i style= "background:url ('<?=$row slide['thumbnail']?> ') no- repeat center 
top"><a href="<?=$row slige['link']?>" target=" blank"><?=$row slide[' 
title']?></a></li> 
<?php 
} 
?> 
</ul> 
</div> 


< !-- 焦 点 幻灯 结束 -> 


把 整合 后 的 index. php 文件 的 第 77 一 124 行 代码 剪 切 ,并 粘贴 到 新 建文 件 footer. php 


中 ,该 文件 的 全 部 代码 如 下 。 

1 <!-- 页 尾 开始 --> 

2 <div class= "footer"> 

3 <div class= "center box"> 

4 <div class= "text"> 

二 <?=$config['company name']?><br /> 

6 电话 : < ?=$config['company phone']?> email:<?=$config['company email 
']?><br /> 

7 地 址 : <?=$ config['company address']?><br /> 
技术 支持 : <?=$ config['company_copyright']?><br /> 

9 友情 链接 :<?php 

10 $sql friend="SELECT * FROM friend"; 

11 $result friend=-mysql query($sql friend); 

Eb while($ row friend-=mysql fetch array ($result friend)){ 

13 2 

3 <ahref="<?=$row friend["'url']?>" target=" blank"><?=$row friend[" 

title']?>< /a> gnbsp; gnbsp; 
15 <?php 
16 } 
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17 ?> 
18 </div> 

19 <div class="ewm"> 

20 <img src="<?=$ config['company ewm']?>" alt="" /> 
21 </div> 

22 </div> 


23 </div> 
24 ”<!-- 页 尾 结束 --> 
站 </body> 
26 </html> 


把 页 头 文件 header. php 和 页 尾 文件 footer. php 引入 到 首页 对 应 的 index. php 文件 ,此 
时 ,index. php 文件 的 代码 如 下 。 


1 <?php require once('header.php');?> 
2 <!--“ 新 闻 动态 ,关于 我 们 、 最 新 产品 ”形成 的 横向 区 域 开始 -一 > 


3 <div class= "container"> 

4 <!-- 新 闻 动态 --> 

5 <div class= "news"> 

6 <div class= mn top"> 

曙 <div class="cat_title"> 新 闻 中 心 </div> 

8 <div class= "more"><a href="article list.php"> 更 多 </a></div> 

9 </div> 

10 <div class="n_center">< img src="images/news thumbnail.jpg"width="111" height= 
ms 

和 <div> 

12 < ?Php 

13 $ sql_settop= "SELECT * FROM article WHERE posid= 'setindex, settop' order by id 

desc LIMIT 0,1"; 

14 $result settop=mysql query($ sql settop); 

15 $row settop=mysql fetch array($ result settop); 

16 ?> 

17 < span style= "font- weight:bold;"><?=mb_ substr ($row_ settop['title'],0,13,°' 


utf- 8')?></span><br /><?=mb _ substr ($row_ settop['content'],0,47,'utf- 8°')? 
>.…[<a href=""> 详 细 < /a>] 


18 </div> 

35 </div> 

20 <div class="n bottom"> 

21 <?2php 

22 $sql article="SELECT * FROM article WHERE posid= 'setindex' order by id desc 
LIMIT 0,5"; 

23 $result article=mysql query($sql article); 

24 while ($ row article-mysql fetch array($ result article)){ 

25 Ee 

26 <a href="article show.php?id=<?=$row article['id']?>"><?=mb_substr 


($row article['title'],0,22, 'utf- 8')?></a> 
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<?2php 
} 
2 
</div> 
</div> 
<!-- 关 于 我 们 --> 
<div class= "about"> 
<div class="a top"> 
<div class="cat title"> 关 于 我 们 < /div> 
</div> 
<div class="a_center"> < img src="images/about img.jpg" width= "381" height=" 
148">< /div> 
<div class="a_bottom"> 
<?php 
$sql about="SELECT * FROM single WHERE id=8"; 
$result about=mysql query($ sql about); 
$row about=mysql fetch array($ result about); 
echo mb_substr ($ row about ['content'],0,128, 'utf- 8°'); 
> 
…[ 详 细 ] < /div> 
</div> 
< !-- 最 新 产品 --> 
<div class= "produce"> 
<div class="p top"> 
<div class="cat title"> 最 新 产品 < /div> 
<div class= "more"><a href= "produce list.php"> 更 多 </a>< /div> 
</div> 
<div class="p bottom"> 
<!-- 这 里 是 产品 缩 略图 轮 播 效 果 --> 
<div id= "slideBox" class="slideBox"> 
<div class="bd"> 
<ul> 
<?php 
$sql produce="SELECT * FROM produce WHERE posid= 'setindex' order by id desc LIMIT 
0,5"; 
$result produce=mysql query($ sql produce); 
while($ row produce=mysql fetch array ($result produce)){ 








?> 
<1li><a href= "produce show.php?id=<?=$row produce['id']?>" target: 
_blank">< img src="<?=$ row produce['thumbnail']?>" width= "270" height 
70" /></a></li> 
<? 
} 
2 


</ul> 
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68 </div> 

69 </div> 

70 <script type= "text/javascript"> 

71 jQuery (". slideBox") . slide ({mainCel1:". bd ul", effect:" left", autoPlay: 
true}); 

72 < /script> 

73 </div> 

74 </div> 

75 </div> 


76 ”<!--“ 新 闻 动 态 , 关 于 我 们 、 最 新 产品 ”形成 的 横向 区 域 结束 -> 
77 <?php require once('footer.php');?> 


72 整合 关于 我 们 " 页 面 


(1) 更 改 文件 的 后 级 名 。 找 到 about. html 文件 ,并 更 改 后 级 名 为 php, 得 到 about. php 
文件 。 

(2) 使 用 Dreamweaver 工具 打开 about. php。 

(3) 分 析 需 整合 的 版 位 。 通 过 版 面 的 分 析 , 该 页 面 的 页 头 幻灯 、 页 尾 三 个 版 位 和 
首页 的 一 致 ,因此 ,只 需 整 合 侧 边栏 sidebar 版 位 和 “关于 我 们 ”内 容 版 位 ,具体 操作 如 下 : 

@ 把 页 头 及 焦点 幻灯 版 位 代码 删除 ,引入 header. php 文件 ; 

@ 把 页 尾 版 位 代码 删除 ,引入 footer. php 文件 。 

(4) 整合 侧 边栏 sidebar 版 位 和 * 关 于 我 们 ?内 容 版 位 

Q@ 整合 侧 边栏 sidebar 版 位 。 在 侧 边栏 sidebar 版 位 中 ,QQ 在 线 客服 需 查 询 数据 表 
qq; 并 循环 输出 ,而 24 小 时 服务 热线 、 微 信 公 众 号 .电子 邮箱 来 自 网 站 基本 配置 信息 表 
config, 因 为 在 首页 整合 时 ,已 产生 记录 集 , 因 此 在 该 版 位 中 直接 使 用 $ config 输出 即 可 。 该 
版 位 整合 后 的 代码 如 下 。 


< 二- 侧 边栏 sidebar- -> 
<div class="slide"> 

<div class="cat title"> 在 线 客服 < /div> 

<div class= "qq"> 
<?php 
$sql qq "SELECT * FROM gq"; 
$result qq-mysql query($ sql qq); 
while ($ row qq-mysql fetch array($ result qq)){ 





区 
<div><?= $row qq['title']?>: < img style="CURSOR: pointer" 
onclick= "javascript:window.open ('http://b.qq. com/webc.htm? new= 0&sid= 
<?= $row qq['qqnum']?> &o=http://&q=7', '_blank', 'height= 502, width= 
644, toolbar=no, scrollbars= no, menubar= no, status= no');"border="0" SRC= 
http://wpa.qq-com/pa?p=1: <?=$row_ qq['qqnum']?>:7 alt=" 欢 迎 咨 询 ">< /div 
> 
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<?2php 
» 
?> 
</div> 
<div class= "service"> 
<span class= "title">24 小 时 服务 热线 </span><br /> 
<span class="detail"><?=$config['company phone']?>< /span> 
</div> 
<div class= "weixin"> 
<span class= "title"> 微 信 公 众 号 <br /> 
< span class="detail"><?=$ config['company weixin']?></span> 
</div> 
<div class="email"> 
<span class="title"> 电 子 邮 箱 <br /> 
< span class="detail"><?=$ config['company email']?></span> 
</div> 
</div> 


@ 整合 “关于 我 们 ?内 容 版 位 。 在 整合 该 版 位 前 ,应 先 在 后 台 单 页 管理 模块 中 添加 一 条 
记录 ,记录 的 标题 为 "关于 我 们 ”, 内 容 可 先 适 当 填 写 一 些 , 单 击 * 添 加 ?按钮 后 将 产生 一 条 新 
记录 ,并 查看 记录 id, 该 id 将 用 于 查询 “关于 我 们 ”页 面 。 


<!-- 关 于 我 们 内 容 --> 
<div class= "right"> 
<div class= "submenu"> <a href= "index.php"> 首 页 </a> -><ahref=""> 关 于 我 们 
</a>< /div> 
<div class= "about_content"> 
<?php 
$ sql_about= "SETPCT * FROM single WHERE id=8"; /ia 的 值 根 据 实 际 情况 填写 即 可 
$result_about=mysql_query($ sql about); 
$row about=mysql fetch array($ result about); 
echo $row about['content']; 
2> 
</div> 


</div> 


“关于 我 们 ”页 面 的 整合 已 完成 ,此 时 about. php 页 面 的 代码 如 下 。 


Dowamouowuwnb rm 


<?Php require once('header.php');?> 
<!--about main 开 始 --> 
<div class= "main"> 

<!-- 侧 边栏 sidebar--> 

<div class= "slide"> 

<div class= "cat title"> 在 线 客 服 </div> 
<div class= "qq"> 
<?Ehp 
$sql qq- "SELECT * FROM qq"; 





10 $result qq-mysql query($sql qq) 

11 while ($row qq-mysql fetch array ($result qq)){ 

2 2> 

13 <div> <?= $row qq[l'title']?>: < img style=" CURSOR: 


pointer" onclick=" javascript: window. open (' http: //b. qq. 

com/webc.htm? new= 0&sid-<?=$row qqd['qqnum']?> &o=http://gq=7',"_ 
blank', 'height=502, width= 644,toolbar= no scrollbars= no,menubar= no status 
=no');"border= "0" SRC=http://wpa.qqd.com/pa?p=1:382526903:7 alt= "欢迎 咨询 " 





> </div> 
14 <?php 
15 k 
16 2 
Ny </div> 
18 <div class="service"> 
19 <span class="title">24 小 时 服务 热线 < /span><br /> 
20 <span class="detail"><?=$config['company phone']?></span> 
21 </div> 
22 <div class= "weixin"> 
23 <span class="title"> 微 信 公 众 号 <br /> 
24 <span class="detail"> <?=$ config['campany weixin']?>< /span> 
25 </div> 
26 <div class="email"> 
27 <span class="title"> 电 子 邮 箱 <br /> 
28 <span class="detail"><?=$config['company email']?></span> 
29 </div> 
30 </div> 
31 <!-- 关 于 我 们 内 容 --> 
32 <div class= "right"> 
33 <div class="submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 关 于 我 们 
</a>< /div> 
外 <div class="about content"> 
35 <?php 
36 $sql about="SELECT * FROM single WHERE id=8"; 
37 $result about=mysql query($ sql about); 
38 $row about=mysql fetch array($ result about); 
39 echo $row about['content']; 
40 2> 
41 </div> 
42 </div> 


43 </div> 
44 <!--main 结束 --> 
45 <?php require once('footer.php');?> 
通过 分 析 相 关 版 面 得 知 ,该 页 面 的 侧 边 栏 sidebar 版 位 与 后 续 相 关 的 页 面 侧 边栏 
sidebar 版 位 一 致 ,因此 ,有 必要 把 该 版 位 的 代码 (上 述 代码 的 第 5 一 30 行 ) 分 离 出 来 形成 单 
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独 的 文件 slide. php ,并 通过 "require_once( “slide. php7) ; ?语句 将 该 文件 引入 到 页 面 中 。 


slide. php 文件 完整 的 代码 如 下 。 


a <div class="slide"> 

2 <div class="cat title"> 在 线 客服 < /div> 

3 <div class= "qq"> 

4 <?php 

5 $sql qq "SELECT * FROM qq"; 

6 $result qq-mysql query($ sql qq); 

7 while($ row qq-mysql fetch array ($result qq)){ 

8 这 

9 <div><?=$row qqd['title']?> : < img style="CURSOR: pointer" 


onclick= "javascript: window. open (' http://b.qq. com/webc. htm? new 
=0&sid=<?=$row qq['qqnum']?> &0=http://&q= 7', '_blank', ' 
height= 502, width= 644, toolbar= no, scrollbars= no, menubar= no, 
status= no ');" border =" 0" SRC = http://wpa. qqd. com/pa? p= 1: 


382526903:7 alt= "欢迎 咨询 ">< /div> 


10 <?Ehp 

11 } 

12 2> 

13 </div> 

14 <div class="service"> 

站 <span class="title">24 小 时 服务 热线 < /span><br /> 

16 < span class="detail"><?=$ config['company phone']?>< /span> 
17 </div> 

18 <div class= "weixin"> 

19 <span class="title"> 微 信 公 众 号 <br /> 

20 < span class="detail">< ?=$ config['campany weixin']?></span> 
21 </div> 

22 <div class="email"> 

23 <span class="title"> 电 子 邮 箱 <br /> 

24 <span class="detail"><?=$ config['company email']?></span> 
25 </div> 

26 </div> 


此 时 ,about. php 文件 的 代码 如 下 。 


<?php require once('header.php');?> 
<!--about main 开 始 --> 
<div class= "main"> 
<!-- 侧 边栏 sidebar--> 
<?Php require once('slide');?> 
<!-- 关 于 我 们 内 容 --> 


<div class= "right"> 


opnwDNDpr 


a></div> 
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<div class="submenu"><a href=“index.php”> 首 页 </a>-><a href 伍 "> 关于 我 们 </ 





9 <div class="about content"> 

10 <?php 

11 $sql about="SELECT * FROM single WHERE id=8"; 
12 $result about=mysql query($ sql about); 

13 $row about=mysql fetch array ($result about); 

14 echo $ row about ['content']; 

15 ?> 

16 </div> 

17 </div> 

18 </div> 


19 <!--main 结 束 --> 
20 <?php require once('footer.php');?> 


至 此 ,关于 我 们 "页 面 已 整合 完成 。 
7.3 整合 新 闻 动 态 " 页 面 


新 闻 动 态 由 新 闻 动态 列表 页 和 新 闻 动 态 内 容 页 组 成 ,因此 , 接 下 来 分 别 整合 新 闻 动态 列 
表 页 和 新 闻 动 态 内 容 页 。 


7.3.1 整合 “新 闻 动态 列表 ”页 


(1) 更 改 文件 的 后 缀 名 。 找 到 about. html 文件 ,并 更 改 后 级 名 为 php, 得 到 文件 about. 
Php。 

(2) 使 用 Dreamweaver 工具 打开 文件 about. php。 

(3) 分 析 需 整合 的 版 位 。 该 页 面 的 页 头 版 位 焦点 幻灯 版 位 、 页 尾 版 位 三 个 版 位 和 首页 
的 版 位 一 致 ,页 面 主体 左 侧 的 版 位 和 * 关 于 我 们 ”页 面 左 侧 侧 边 栏 sidebar 版 位 一 致 ,因此 ,只 
需 整合 该 页 面 右 侧 的 文章 列表 版 位 即 可 。 具 体操 作 如 下 : 

把 文件 的 页 头 版 位 、 焦 点 幻灯 版 位 代码 删除 ,并 引入 头 部 文件 header. php; 把 侧 边 栏 
sidebar 版 位 的 代码 删除 ,并 引入 侧 边 栏 sidebar 版 位 文件 ;把 页 尾 版 位 文件 删除 ,并 引入 页 
尾 版 位 文件 footer. php ,此 时 ,article_list. php 文件 的 代码 如 下 。 





1 <?php require once('header.php');?> 

2 <!--main 开始--> 

:| <div class= "main"> 

4 <!-- 侧 边栏 sidebar--> 

5 < ?php require once('slide.php');?> 

6 <!-- 文 章 标题 列表 -一 > 

2 <div class="right"> 

8 <div class= "submenu"><a href=-“index.php”> 首 页 </a> -><a href 全 "> 新 闻 动态 </ 
a></div> 

9 <div class="article content"> 

10 <div class="row"> 


233 


项 目 驱 动 式 PHP 动态 网 站 开发 实 训 教程 





234 


<div class="title"><a href=""> 茶 叶 具 有 养 胃 的 功效 吗 ? < /a>< /div> 
<div class="date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class="title"><a href="> 茶 事 起 源 : 六 朝 以 前 的 茶 事 </a></div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class= "title"><a href=""> 红 碎 茶 红 艳 的 颜色 、 鲜 爽 的 香气 和 很 高 
的 营养 价值 < /a>< /div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class= "row"> 
<div class= "title"><a href=""> 中 国 古 代 史 料 中 的 茶 字 和 世界 各 国 对 
茶 字 的 音译 </a>< /div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class= "row"> 
<div class="title"><a href=""> 茶 是 用 来 喝 的 一 杯 陈 年 普洱 味道 </a> 
</div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class= "row"> 
<div class="title"><a href=""> 和 人 山 无 处 不 飞 梁 , 政 螺 春 香 百 里 醉 </a> 
</div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class= "row"> 
<div class= "title"><a href=""> 普 洱 茶 越 陈 越 香 的 年 限 是 多 久 ? </a></div 
> 
<div class="date"> 2016- 4- 2< /div> 
</div> 
</div> 
<div class= "page"> 
<ahref="">|<</a> 





<ahref=""><<</a> 
<ahref="">1</a> 
<a href="">2< /a> 
<ahref="">>></a> 
<ahref="">>|</a> 
</div> 
</div> 

</div> 

<!--main 结 束 --> 

<?Php require once('footer.php');?> 


工作 任务 7 网 站 前 后 台 的 整合 





(4) 整合 文章 标题 列表 版 位 。 找 到 article_content 盒子 ,在 该 盒子 当中 首先 保留 其 中 
一 个 row 盒子 ,比如 保留 以 下 盒子 : 


<div class= "row"> 


<div class= "title"><a href=""> 茶 叶 具 有 养 胃 的 功效 吗 ? < /a>< /div> 
<div class="date"> 2016- 4- 2< /div> 


</div> 


把 其 他 的 row 盒子 删除 ,然后 使 用 PHP 查询 数据 表 article, 并 循环 输出 文章 标题 等 信 
息 。 整 合 后 该 版 位 的 代码 如 下 。 


w Nb PP 


31 
区 


< !-- 文 章 标题 列表 - -> 
<div class="right"> 
<div class="submenu"><a href="index.php"> 首 页 </a>-><a href="article list. 
php"> 新 闻 动 态 < /a>< /div> 
<div class="article content"> 
<?php 
// 记 录 的 总 条 数 
$ total num=mysql num rows(mysql query("SELECT * FROM article")); 
// 每 页 记录 数 
$ pagesize=7; 
// 总 页 数 
$page_num= ceil ($ total num/$ pagesize); 
// 设 置 页 数 
$page=$_GET['page']; 
if($page<1 || $page==""){ 
S$page=1; 
} 
if ($page> $ page num) { 
$ page=$ page_num; 
} 
// 计 算 机 记录 的 偏 移 量 
$ offset=$pagesize* ($page-1); 
7 圭一 页 ,下 一 页 
$ prepage= ($page< >1)?$page- 1:$page; 
$ nextpage= ($page< > $page num)?$ paget 1:$page; 
$result articlelist=mysql query ("SELECT * FROM article order by id desc LIMIT 
$ offset, $ pagesize"); 
if($total num>0){ 
while($ row articlelist=mysql fetch array ($result articlelist)){ 
2> 
<div class= "row"> 
<div class= "title"><a href= "article show.php?id=<?=$row articlelist["'id']? 
>"><?=$row articlelist['title']?></a></div> 
<div class= "date"><?=$ row articlelist['pubdate']?>< /div> 
</div> 
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53 


至 此 ， 


1 
2 
3 
4 
5 
6 
7 
8 
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<?Php 
} 
?> 
</div> 
<div class="page"> 
<a><?= $page? >/<?= $page_ num? > </a> gnbsp; gnbsp; < a href="?page=1">| 
<< /a> gnbsp; gnbsp;<a href="?page=< ?=$prepage?>"><<< /a> gnbsp; gnbsp; 
<?php 
for($i=1;$i<=$page num;$i++){ 
2> 
<ahref="?page=<?=$i?>"><?=$i?></a> 
<?Php }?> 
Enbsp; enbsp; <a href="?page=< ?= $nextpage? >">>></a> gnbsp; gnbsp;<a 
href="?page=<?=$page num? >">>|</a> 
</div> 
<?php 
Jelse{ 
echo " 暂 无 记录 "; 
Ee 
</div> 
</div> 
<!--main 结 束 --> 


新 闻 动态 列表 页 整合 完成 ,该 页 面 (article_list. php) 的 完整 代码 如 下 。 


<?php require once('header.php');?> 
<!--main 开始--> 
<div class="main"> 
< !-- 侧 边栏 sidebar--> 
<?php require once('slide.php');?> 
< 二 -文章 标题 列表 --> 
<div class= "right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 新 闻 动态 </ 
a></div> 
<div class= "article content"> 
<?php 
// 记 录 的 总 条 数 
$ total num=mysql num rows (mysql query ("SELECT * FROM article")); 
// 每 页 记录 数 
$pagesize=7; 
// 总 页 数 
$page_numr ceil ($ total num/$ pagesize); 
// 设 置 页 数 
$page=$_GET['page']; 
if($page<1 || $page==""){ 
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$page=1; 
泊 
if($page> $page num) { 
$page=$ page num; 
时 
// 计 算 机 记录 的 偏 移 量 
$ offset=$pagesize* ($page-1); 
// 上 一 页 .下 一 页 
$prepage= ($page< >1)?$page- 1:$page; 
$nextpage= ($page< > $page num)?$paget1:$page; 
$result articlelist=mysql query ("SELECT * FROM article order by id desc LIMIT 
$ offset, $ pagesize"); 
if($ total num>0){ 
while ($row articlelist=mysql fetch array($ result articlelist)){ 
2 
<div class= "row"> 
<div class= "title"><a href= "article show.php?id=<?=$row articlelist ['id']?>" 
><?=$row articlelist['title']?></a>< /div> 
<div class="date"><?=$row articlelist['pubdate']?>< /div> 
</div> 
<?php 


?> 
</div> 
<div class="page"> 
<a><?=$page?>/<?= $page_num? > </a> gnbsp; gnbsp;< a href="?page=1"> |<</a> 
&nbspy&nbsp;<a href="?page=< ?=$prepage? > "><<< /a> gnbsp; énbsp; 
<?Php 
for ($i=1;$i<=$page num;$i++){ 
人 
<ahref="?page=<?=$i?>"><?=$i?></a> 
<?php }?> 
gnbsp; snbsp;<a href—="?page=< ?=$ nextpage? > "> >>< /a> gnbsp; gnbsp;<a href= "?page=<? 
=$page num?>">> |</a> 
</div> 
<?Php 
Jelse{ 
echo " 暂 无 记录 "; 
} 
?> 
</div> 
</div> 
<!--main 结 束 --> 
<?php require once('footer.php');?> 
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人 .3.2 


整合 “新 闻 动态 ”内 容 页 

(1) 更 改 文件 后 缀 名 。 找 到 article_show. html 文件 ,并 更 改 后 缀 名 为 php, 得 到 article_ 
show. php 文件 。 

(2) 使 用 Dreamweaver 工具 打开 article_show. php。 

(3) 分 析 需 整合 的 版 位 。 该 页 面 的 页 头 版 位 、 焦 点 幻灯 版 位 、 页 尾 版 位 三 个 版 位 和 首页 


的 版 位 一 致 ,页 面 主 体 左 侧 的 版 位 和 “关于 我 们 ”页 面 左 侧 侧 边栏 sidebar 版 位 一 致 ,因此 ,只 
需 整 合 该 页 面 右 侧 的 文章 列表 版 位 即 可 。 具 体操 作 如 下 。 


把 文件 的 页 头 版 位 、 焦 点 幻灯 版 位 代码 删除 ,并 引入 头 部 文件 header. php; 把 侧 边栏 


sidebar 版 位 的 代码 删除 ,并 引入 侧 边 栏 sidebar 版 位 文件 ;把 页 尾 版 位 文件 删除 ,并 引入 页 
尾 版 位 文件 footer. php, 此 时 ,article_list. php 文件 的 代码 如 下 。 
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<?Php require once('header.php');?> 
<!--main 开 始 --> 
<div class="main"> 
<!-- 侧 边栏 sidebar- -> 
<?php require once('slide.php');?> 
< !-- 文 章 标题 列表 - -> 
<div class= "right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 新 闻 动 态 < /a> 
</div> 
<div class="article content"> 


<div class="row"> 
<div class="title"><a href=""> 茶 叶 具 有 养 胃 的 功效 吗 ? < /a>< /div> 
<div class="date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class="title"><a href=""> 茶 事 起 源 : “六朝 以 前 的 茶 事 ”< /a>< /div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class="title"><a href-""> 红 碎 茶 红 艳 的 颜色 、 鲜 爽 的 香气 和 很 高 的 营养 
价值 < /a>< /div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class="title"><a href=""> 中 国 古代 史料 中 的 蔡 字 和 世界 各 国 对 茶 字 的 
音译 < /a>< /div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class= "title"><a href=""> 茶 是 用 来 喝 的 一 杯 陈 年 普洱 味道 </a> </div 
> 
<div class= "date"> 2016- 4- 2< /div> 





</div> 
<div class="row"> 
<div class= "title"><a href=""> 信 山 无 处 不 飞 深 ,碧螺春 香 百 里 醉 < /a> < /div 
六 
<div class="date"> 2016- 4- 2< /div> 
</div> 
<div class="row"> 
<div class= "title"> <a href= 
</div> 
<div class= "date"> 2016- 4- 2< /div> 
</div> 
</div> 
<div class="page"> 
<ahref="">|<</a> 
<ahref=""><<</a> 
<a href="">1</a> 
<a href="">2< /a> 
<ahref="">>></a> 
<ahref="">>|</a> 





"> 普洱 茶 越 陈 越 香 的 年 限 是 多 久 ?< /a> 


</div> 
</div> 
</div> 
<!--main 结 束 --> 


<?Php require once('footer.php');?> 
(4) 整合 文章 内 容 的 版 位 。 


<div class="right"> 
<div class="submenu"><a href=“index.php”> 首 页 </a>-><a href= 
> 
<div class="article content"> 
<?php 
$sql articleshow="SELECT * FROM article WHERE id="'".$_ GET["'id'] 


新 闻 动 态 </a>-></div 








$result articleshow=mysql query($ sql articleshow); 
$row articleshow=mysql fetch array($ result articleshow); 
号 
<div class="title"><?=$ row articleshow['title']?></div> 
<div class= "from"> 来 源 : <?=$row_articleshow['comefrom']?> 发 布 日 期 : <?= $row_ 
articleshow['pubdate']?>< /div> 
<div class="detail"><?=$ row articleshow['content']?></div> 

</div> 

</div> 


至 此 ,新 闻 动 态 内 容 页 整合 完成 ,该 页 面 (article_show. php) 的 完整 代码 如 下 。 


于 <?php require once('header.php');?> 
2 <!--about main 开 始 --> 
入 <div class="main"> 
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4 <!-- 侧 边栏 sidebar--> 

5 <?php require once('slide.php');?> 

6 <!-- 文 章 内 容 --> 

7 <div class="right"> 

8 < div class="submenu" > <a href="index.php"> 首 页 </a>-><a href= 
"article list.php"> 新 闻 动态 < /a>->< /div> 


3 <div class="article content"> 

10 <?php 

11 $sql articleshow= "SELECT #* FROM article WHERE id="'".$ GET['id']." 

12 $result articleshow=mysql query($ sql articleshow); 

13 $row articleshow=mysql fetch array($ result articleshow); 

14 ?> 

15 <div class="title"><?=$row articleshow['title']?>< /div> 

16 <div class="from"> 来 源 : <?=$row_articleshow['comefrom']?> 发 布 日 期 : 
<?=$row articleshow['pubdate']?>< /div> 

17 <div class="detail"><?=$row articleshow['content']?>< /div> 

18 </div> 

19 </div> 


20 </div> 
21 <!--main 结 束 --> 
22 < ?Php require once('footer.php');?> 


74 整合 “产品 展示 ”页 面 


产品 展示 由 产品 展示 列表 页 和 产品 展示 内 容 页 组 成 ,因此 , 接 下 来 分 别 整合 产品 展示 列 
表 页 和 产品 展示 内 容 页 。 


7.4.1 整合 “产品 展示 列表 ”页 


(1) 更 改 文件 的 后 级 名。 找到 produce_list. html 文件 ,并 把 后 级 名 改 为 php, 得 到 
produce_list. php 文件 。 

(2) 使 用 Dreamweaver 工具 打开 produce_list. php。 

(3) 分 析 需 整合 的 版 位 。 通 过 版 面 的 分 析 , 该 页 面 的 页 头 版 位 焦点 幻灯 版 位 、 页 尾 版 
位 三 个 版 位 和 首页 的 版 位 一 致 .页 面 主体 左 侧 的 版 位 和 “关于 我 们 ”页 面 左 侧 侧 边栏 sidebar 
版 位 一 致 ,因此 ,只 需 整 合 该 页 面 右 侧 的 产品 缩 略 图 列表 版 位 即 可 。 具 体操 作 如 下 : 

把 文件 的 页 头 版 位 、 焦 点 幻灯 版 位 代码 删除 ,并 引入 头 部 文件 header. php; 把 侧 边栏 
sidebar 版 位 的 代码 删除 ,并 引入 侧 边 栏 sidebar 版 位 文件 ;把 页 尾 版 位 文件 删除 ,并 引入 页 
尾 版 位 文件 footer. php ,此 时 .produce_list. php 文件 的 代码 如 下 。 


<?Php require once('header.php');?> 
< 上 -about main 开 始 --> 
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<div class= "main"> 
<!-- 侧 边栏 sidsbar- -> 
<?php require once('slide.php');?> 
<!-- 产 品 展示 -一 > 
<div class="right"> 
<div class="submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 产 品 展示 < /a> 
-></div> 
<div class= "produce content"> 
<div class= "pro box"><a href="">< img src="images/pro(1).jpg"></a></ 
div> 
<div class= "pro box"><a href="">< img src="images/pro(2).jpg"></a></ 
div> 
<div class= "pro box"><a href="">< img src="images/pro(3) .jpg"></a></ 
div> 
<div class= "pro box"><a href="">< img src="images/pro(4) .jpg"></a></ 
div> 
<div class= "pro box"><a href=""> < img src="images/pro(5) .jpg"></a></ 
div> 





<div class= "pro box"> <a href=""> < img src= "images/pro(6) .jpg"></a></ 


div> 





<div class= "pro box"><a href 
div> 


""> < img src= "images/pro(7) .jpg"></a></ 


<div class= "pro box"><a href="">< img src="images/pro(8) .jpg"></a></ 
div> 

<div class= "pro box"><a href="">< img src= "images/pro(9) .jpg"></a></ 
div> 

<div class= "pro box"><a href="">< img src="images/pro(10) .jpg"></a></ 
div> 

<div class= "pro box"><a href="">< img src= "images/pro(11) .jpg"></a></ 
div> 

<div class= "pro box"><a href="">< img src= "images/pro(12) .jpg"></a></ 
div> 

<div class= "pro box"><a href="">< img src= "images/pro(13) .jpg"></a></ 
div> 

<div class= "pro box"><a href="">< img src= "images/pro(14) .jpg"></a></ 
div> 

<div class= "pro box"><a href="">< img src= "images/pro(15) .jpg"></a></ 
div> 

<div class= "pro box"><a href="">< img src= "images/pro(16) .jpg"></a></ 
div> 

</div> 
<div class="page"> 
<ahref="">|<</a> 
<ahref=""><<</a> 
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<ahref="">1</a> 
<ahref="">2</a> 
<ahref=">>></a> 
<ahref="">>|</a> 


</div> 
</div> 
</div> 
<!--main 结 束 --> 


< ?php require once('footer.php');?> 


(4) 整合 产品 列表 版 位 。 整 合 该 版 位 时 ,保留 其 中 一 个 pro_box 的 div 容器 ,其 他 均 删 


除 , 然 后 把 余下 的 这 个 pro_box 容器 作为 循环 体 输出 16 个 产品 缩 略 图 ,当然 要 引入 分 页 功 


能 。 
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代码 如 下 。 


<!-- 产 品 展示 -> 
<div class="right"> 
<div class="submenu"><a href= "index.php"> 首 页 </a>-><a href= "produce list.php" 
> 产品 展示 </a>-></div> 
<div class= "produce _ content"> 
<?php 
// 记 录 的 总 条 数 
$ total num=mysql num rows (mysql query ("SELECT id FROM produce")); 
// 每 页 的 记录 数 
$ pagesize=16; 
// 总 页 数 
$ page num= ceil ($ total num/$ pagesize); 
// 设 置 页 数 
$page=$_GET['page']; 
if($page<1 || $page= 
$page=1; 





和 
if($ page> $page_ num) { 
$ page=$ page_num; 
} 
// 计 算 机 记录 的 偏 移 量 
$ offset=$ pagesize* ($page-1); 
下 一 现下 一 责 
$ prepage= ($page< >1)?$page- 1:$page; 
S$ nextpage= ($page<>$page num)?$paget1:$page; 
$result producelist=mysql query ("SELECT * FROM produce order by id desc LIMIT $offset, 
$pagesize"); 
if($total num>0){ 
while ($ row producelist=mysql fetch array ($result producelist)){ 
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<div class="pro box"><a href= "produce show.php?id=<?=$ row producelist['id']?>">< 
img src="< ?=$ row producelist["thumbnail']?>"></a></div> 
<?php 
} 
?> 
</div> 
<div class="page"> 
<a><?=$page?>/<?=$page num?></a> gnbsp; gnbsp;<a href="?page=1"> |<</a> 
&nbsp; Enbsp;<a href="?page=< ?=$ prepage? > "><<< /a> gnbsp; gnbsp; 
<?php 
for($i=1;$i<=$page num;$i++){ 
S 
<ahref="?page=<?=$i?>"><?=$i?></a> 
<?php }?> 
&nbsp; &nbsp; < a href="?page= <?= $nextpage? >"> > > </a> gnbsp; gnbsp; 
?page=<?=$page num?>">>|</a> 





</div> 
<?php 
Jelse{ 
echo " 暂 无 记录 "; 
} 
?> 
</div> 


至 此 ,产品 列表 页 整合 完成 ,produce_list. php 文件 完整 的 代码 如 下 。 


oaoumwnb rpr 


<?php require once('header.php');?> 
<!--about_main 开 始 --> 
<div class="main"> 
< !-- 侧 边栏 sidebar- -> 
<?php require once('slide.php');?> 
<!-- 产 品 展示 --> 
<div class= "right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href="produce list. 
Ehp"> 产 品 展示 </a> -></div> 
<div class= "produce content"> 
<?php 
// 记 录 的 总 条 数 
$ total num=mysql_ num rows (mysql query ("SELECT id FROM produce") ); 
// 每 页 的 记录 数 
$pagesize=16; 
// 总 页 数 
$page_numr ceil ($ total num/$ pagesize); 
// 设 置 页 数 
$page=$_GET['page']; 
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if($page<1 || $page==""){ 
$page=1; 
if($page> $page num) { 
$ page=$ page num; 
} 
// 计 算 机 记录 的 偏 移 量 
$ offset=$pagesize* ($page- 1); 
// 上 一 页 .下 一 页 
$prepage= ($page< >1)?$page- 1:$page; 
$nextpage= ($page< > $page num)?$paget1:$page; 
$result_ producelist=mysql query ("SELECT * FROM produce order by id desc LIMIT 
$ offset, $ pagesize"); 
if($total num>0){ 
while ($ row producelist=mysql fetch array ($result producelist)){ 
2> 
<div class="pro box"><a href= "produce show.php?id=<?=$row producelist{[' 
id']?>"><img src="<?=$ row producelist['thumbnail']?>"></a></div> 
<?Php 
} 
es 
</div> 
<div class= "page"> 
<a><?=$page?>/<?=$page num?></a> gnbsp; gnbsp;<a href="?page=1"> |<</a 
> gnbsp; gnbsp;<a href="?page=<?=$prepage? > "><<< /a> gnbsp; énbsp; 
<?2php 
for($i=1;$ i<=$page num;$i++){ 
2 
<ahref="?page=<?=$i?>"><?=$i?></a> 
<?php }?> 
&nbsp; gnbsp;<a href="?page= < ?= $nextpage? >">>></a> gnbsp; snbsp; <a href 
="?page=<?=$page num?>">>|</a> 
</div> 
<?php 
Jelse{ 
echo " 暂 无 记录 "; 
} 
?2> 
</div> 
</div> 
<!--main 结 束 --> 
< ?php require once('footer.php');?> 





7.4.2 整合 "产品 展示 ”页 面 

(1) 更 改 文 件 的 后 级 名 。 找 到 produce_show. html 文件 ,把 后 级 名 改 为 php, 得 到 
produce_show. php 文件 。 

(2) 使 用 Dreamweaver 工具 打开 produce_show. php。 

(3) 分 析 需 整合 的 版 位 。 通 过 版 面 的 分 析 , 该 页 面 的 页 头 版 位 、 焦 点 幻灯 版 位 、 页 尾 版 
位 三 个 版 位 和 首页 的 版 位 一 致 ,页 面 主体 左 侧 的 版 位 和 “关于 我 们 ”页 面 左 侧 侧 边栏 sidebar 
版 位 一 致 ,因此 ,只 需 整 合 该 页 面 右 侧 的 产品 详细 内 容 版 位 即 可 。 具 体操 作 如 下 。 

把 文件 的 页 头 版 位 、 焦 点 幻灯 版 位 代码 删除 ,并 引入 头 部 文件 header. php; 把 侧 边栏 
sidebar 版 位 的 代码 删除 ,并 引入 侧 边栏 sidebar 版 位 文件 ;把 页 尾 版 位 文件 删除 ,并 引入 页 
尾 版 位 文件 footer. php, 此 时 ,produce_show. php 文件 的 代码 如 下 。 


1 <?=require once('header.php');?> 

2 <!--about main 开始 --> 

3 <div class= "main"> 

4 <!-- 侧 边栏 sidebar--> 

5 <?=require once('header.php');?> 

6 <!-- 产 品 内 容 --> 

1 <div class= "right"> 

8 <div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href= "produce list. 
php"> 产 品 展示 < /a>->< /div> 

9 <div class= "produce show content"> 

10 <div class= "title"> 问 道 紫砂 茶具 < /div> 

3 <div class="detail"> 

12 < img src= "images/pro d 1.jpg" width="760"><br /> 

13 < img src= "images/pro d 2.jpg"><br /> 

14 < img src= "images/pro d 3.jpg"> 

15 </div> 

16 </div> 

17 </div> 

18 </div> 


19 <!--main 结 束 --> 


20 <?=require once('footer.php');?> 
(4) 产品 详细 内 容 版 位 的 整合 。 该 版 位 整合 后 的 代码 如 下 。 
<!-- 产 品 内 容 --> 


<div class="right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><a href=""> 产 品 展示 < /a> 
-></div> 
<div class="produce show content"> 
<?php 
$sql produceshow= "SELECT * FROM produce WHERE id="'".$ GET["id']."""; 


245 


项 目 驱动 式 PHP 动态 网 站 开发 实 训 教程 





$result produceshow=mysql query ($ sql produceshow) 7 
$row produceshow=mysql fetch array($ result produceshow); 
?> 
<div class="title"><?=$ row produceshow['title']?></div> 
<div class="detail"> 
<?=$row produceshow['content']?> 

</div> 

</div> 

</div> 


至 此 ,产品 内 容 页 整合 已 完成 ,produce_show. php 文件 完整 的 代码 如 下 。 


1 < ?php require once('header.php');?> 

2 <!--about main 开始 --> 

3 <div class= "main"> 

4 < 上 二- 侧 边栏 sidebar--> 

‘5 < ?Php require once('slide.php');?> 

6 <!-- 产 品 内 容 --> 

<div class="right"> 

8 <div class="submenu"><a href-=“index.php”> 首 页 </a>-><a href= "produce list. 
php"> 产 品 展示 < /a>->< /div> 

9 <div class= "produce show content"> 

10 <?Ehp 

11 $sql_produceshow= "SELECT * FROM produce WHERE id="'".$ _GET['id']." 

ms 

12 $result produceshow=mysql query ($ sql_produceshow); 

13 $row produceshow=mysql fetch array ($result produceshow); 

14 2> 

外 <div class= "title"><?=$row produceshow['title']?>< /div> 

16 <div class="detail"> 

17 <?=$row produceshow['content']?> 

18 </div> 

19 </div> 

20 </div> 

2 </div> 


22 <!--main 结 束 --> 
23 < ?php require once('footer.php');?> 


75 整合 "给 我 





言 ” 页面 


(1) 更 改 文件 的 后 缀 名 。 找 到 guestbook. html 文件 并 把 后 级 名 更 改 为 php, 得 到 
guestbook. php 文件 。 

(2) 使 用 Dreamweaver 工具 打开 guestbook. php。 
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(3) 分 析 需 整合 的 版 位 。 通 过 版 面 的 分 析 , 该 页 面 的 页 头 版 位 、 焦 点 幻灯 版 位 、 页 尾 版 
位 三 个 版 位 和 首页 的 版 位 一 致 ,页 面 主体 左 侧 的 版 位 和 “关于 我 们 ”页 面 左 侧 侧 边栏 sidebar 
版 位 一 致 ,因此 ,只 需 整 合 该 页 面 右 侧 的 填写 留言 版 位 即 可 。 具 体操 作 如 下 : 
把 文件 的 页 头 版 位 、 焦 点 幻灯 版 位 代码 删除 ,并 引入 头 部 文件 header. php; 把 侧 边栏 
sidebar 版 位 的 代码 删除 ,并 引入 侧 边栏 sidebar 版 位 文件 ;把 页 尾 版 位 文件 删除 ,并 引入 页 
尾 版 位 文件 footer. php, 此 时 ,guestbook. php 文件 的 代码 如 下 。 








<?php require once('header.php');?> 
<!--about main 开 始 --> 
<div class= "main"> 
<!-- 侧 边栏 sidebar- -> 
< ?php require once('slide.php');?> 
< !-- 给 我 留言 --> 
<div class="right"> 
<div class="submenu"><a href=“index.php”> 首 页 </a>-><a href=“guestbook.php”> 
给 我 留言 < /a>< /div> 
<div class= "guestbook content"> 
< form name= "forml" id= "forml" action="" method= "post"> 
<ul> 
<1i class="title">< span class= "mst"> * </span> 标 题 : < /1i> 
<1i><input name="title" type= "text" id= "title"></li> 
</u> 
<ul> 
<1i class="title">< span class="must"> * </span> 称 呼 : </1i> 
<1i>< input name= "name" type= "text" id="name">< /li> 
</u> 
<ul> 
<1i class= "title"> 手 机 : </1i> 
<1i><input name= "tel" type= "text" id="tel"></li> 
</ul> 
<ul> 
<1i class="title">QQ: </1i> 
<1i>< input name= "qq" type= "text" id- "qq"></1i> 
</u> 
<ul> 
<1i class="title">< span class= "must"> * </span> 邮 箱 : </1i> 
<1li><input name= "email" type= "text" id= "email"></li> 
</u> 


<ul class="ct"> 
<1i class="title">< span class= "must"> * </span> 内容: </1i> 
<1i> 


< textarea name=" content" cols="60" rows="5" id="content"> 
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< /textarea> 
</li> 
</u> 
<div> 


< input type= "image" src= "images/submit.png"> 


</div> 
</form> 
</div> 
</div> 
</div> 
<!--main 结 束 --> 


< ?php require once('footer.php');?> 

(4) 整合 添加 留言 版 位 。 该 版 位 由 表单 元 素 组 成 ,主要 用 于 获取 用 户 填写 的 留言 信息 ， 
因此 当 用 户 填写 完 , 并 单 击 * 提 交 ” 按 钮 后 ,留言 的 信息 应 写 入 留言 信息 表 , 并 把 代码 写 在 页 
面 的 最 后 。 为 了 判断 什么 时 候 才 执行 写 入 操作 , 需 引 入 计 条 件 语句 进行 判断 , 当 条 件 成 立 
的 时 候 才 执行 写 和 语句。 该 版 位 整合 后 ,guestbook. php 文件 的 完整 代码 如 下 。 


ovwaouo ww nb 


<?Php require once('header.php');?> 
<!--about main 开始--> 
<div class="main"> 
< !-- 侧 边栏 sidebar--> 
<?php require once('slide.php');?> 
<!-- 给 我 留言 --> 
<div class= "right"> 
<div class="submenu"> <a href=“index.php”> 首 页 </a> -><a href=“guestbook. 
php”> 给 我 留言 </a>< /div> 
<div class="guestbook content"> 
< form name= "forml" id= "forml" action="?act=add" method= "post"> 
<u> 
<1i class="title"><span class= "must"> * </span> 标 题 : < /1i> 
<1li><input name= "title" type= "text" id="title"></li> 
</ul> 
<ul> 
<1i class="title"><span class= "must"> * </span> 称 呼 : </1i> 
<1i><input name= "name" type= "text" id="name"></li> 
</ul> 
<ul> 
<1li class="title"> 手 机 : </1i> 
<l1i><input name="tel" type= "text" id="tel"></li> 
</ul> 
<ul> 
<1i class= "title">Q8: </1i> 
<1i><input name= "qq" type= "text" id- "qq"></1i> 
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</ul> 
<ul> 
<1i class= "title"><span class= "must"> * </span> 邮 箱 : </1i> 
<1i><input name= "email" type= "text" id= "email"></1i> 
</ul> 


<ul class="ct"> 
<1i class="title"><span class="must"> * </span> 内 容 : </1i> 
<1i> 


< textarea name="content" cols="60" rows="5" id="content"></ 


textarea> 
</li> 
</ul> 
<div> 
<input type= "image" src= "images/submit.png"> 
</div> 
</form> 
</div> 
</div> 
</div> 
<!- -main 结 束 --> 
<“?Php 
if($_GET['act']==add){ 
if($_POST['title']==""){ 
echo "< script>alert (' 留 言 标题 不 能 为 空 !') ;history.go(-1)</script>"; 
exit; 
} 
if($_POST['name']==""){ 
echo "< script>alert (' 称 呼 不 能 为 空 !') ;history.go(-1)</script>"; 
exit; 
} 
if($_POST["'email']==""){ 
echo "< script>alert ("邮箱 不 能 为 空 !') ;history.go(-1)< /script>"; 
exit; 
} 
if($_POsT['content']==""){ 
echo "<script>alert ("留言 内 容 不 能 为 空 !1') ;history.go(-1)</script>"; 
exit; 
} 





$sql_ geustbook=" INSERT INTO guestbook (title, pubdate, name, tel, qq, email, 
content, deal)VALUES('".$ _POST['title']."', curdate (), '".$_POST['name']. 


m,n.$ PosT['tel']."','".$ PosT['qq']."','".$ PosT['email']."', 


POST['content'] ."',' 否 ')"; 


mysql query($ sql geustbook); 


ms$ 
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66 echo"< script > alert (' 留 言 成 功 ,我 们 尽快 联系 您 ! ');window. location. href= 
'guestbook.php'< /script> "; 

67 1} 

68 ?> 


69 <?php require once('footer.php');?> 
76 整合 "联系 我 们 " 页 面 


(1) 更 改 文件 的 后 缀 名 。 找 到 contact. html 文件 ,把 后 级 名 更 改 为 . php, 得 到 contact. php 
文件 。 

(2) 使 用 Dreamweaver 工具 打开 contact. php。 

(3) 分 析 需 整合 的 版 位 。 通 过 版 面 的 分 析 , 该 页 面 的 页 头 版 位 、 焦 点 幻灯 版 位 、 页 尾 版 
位 三 个 版 位 和 首页 的 版 位 一 致 ,页 面 主体 左 侧 的 版 位 和 * 关 于 我 们 ”页 面 左 侧 侧 边 栏 sidebar 
版 位 一 致 ,因此 ,只 需 整合 该 页 面 右 侧 的 “联系 我 们 ”内 容 版 位 即 可 。 具 体操 作 如 下 。 

把 文件 的 页 头 版 位 .焦点 幻灯 版 位 代码 删除 ,并 引入 头 部 文件 header. php; 把 侧 边 栏 
sidebar 版 位 的 代码 删除 ,并 引入 侧 边栏 sidebar 版 位 文件 ;把 页 尾 版 位 文件 删除 ,并 引入 页 
尾 版 位 文件 footer. php, 此 时 ,contact. php 文件 的 代码 如 下 : 


<?Php require once('header.php');?> 
<!--about main 开始 - -> 
<div class= "main"> 
<!-- 侧 边栏 sidebar--> 
<?php require once('slide.php');?> 
<!-- 联 系 我 们 --> 
<div class= "right"> 
<div class= "submenu"> <a href=“index.php”> 首 页 </a>-><ahref=""> 联 系 我 们 
</a></div> 
<div class= "contact content"> 
<div class="contact img">< img src="images/contact.jpg">< /div> 
<div class="detail"> 
<strong> 公 司 名 称 : </strong> 问 道 茶 具有 限 公 司 <br /> 
<strong> 公 司 地 址 : < /strong> 广 东 省 惠州 市 惠 城区 <br /> 
<strong> 联 系 人 : </strong> 张 丰 <br /> 
<strong> 联 系 电话 : < /strong> 00000000000<br /> 
<strong> 手 机 : < /strong> 00000000000<br /> 
<strong> 电 子 邮 箱 : < /strong> dreammymavye 163.com<br /> 
<strong> 微 信 : < /strong> dreammy168<br /><br /> 
< img src= "images/map.jpg" width= "697" height= "284"> 
</div> 
</div> 
</div> 
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</div> 
<!--main 结 束 --> 
< ?php require once('footer.php');?> 


上 述 代码 class 二 "detail" 的 div 盒子 中 的 内 容 及 代码 ,在 整合 时 是 可 以 删除 的 ,因为 该 
盒子 的 内 容 来 自 数据 库 , 具 体 的 表现 形式 是 可 以 通过 编辑 器 编辑 的 。 

(4) 整合 “联系 我 们 ?内 容 版 位 。 在 整合 该 版 位 前 ,应 先 在 后 台 单 页 管理 模块 中 添加 一 
条 记录 ,记录 的 标题 为 “联系 我 们 ”, 内 容 可 先 适当 填写 一 些 , 单 击 * 添 加 ?按钮 后 将 产生 一 条 
新 记录 ,并 查看 记录 id, 该 id 将 用 于 查询 “联系 我 们 ”的 内 容 。 

该 版 位 整合 后 的 代码 如 下 。 


<!--“ 联 系 我 们 ”的 内 容 --> 
<div class="right"> 
<div class= "submenu"><a href=“index.php”> 首 页 </a>-><ahref=""> 联 系 我 们 < /a 
> </div> 
<div class="about_content"> 
<?php 
$ sql_ about="SELECT * FROM single WHERE id=9"; 
$result about=mysql query($ sql about); 
$row about=mysql fetch array($ result about); 
echo $row about['content']; 
2> 
</div> 
</div> 
</div> 


至 此 ,“ 联 系 我 们 ”页 面 整 合 完成 .contact. php 文件 完整 的 代码 如 下 。 


1 <?php require once('header.php');?> 

2 <!--about main 开始--> 

3 <div class= "main"> 

4 < !-- 侧 边栏 sidebar--> 

5 <?php require once('slide.php');?> 

6 <!-- 联 系 我 们 --> 

<div class= "right"> 

8 <div class= "submenu"><a href-“index.php”> 首 页 </a>-><a href=""> 联 系 我 们 </ 
a></div> 

9 <div class="contact content"> 

10 <div class= "contact img">< img src="images/contact.jpg">< /div> 

11 <div class="detail"> 

12 <?php 

13 $sql about="SELECT * FROM single WHERE id= 9"7 

14 $result about=mysql query ($sql about); 

让 S$ row_about=mysql_fetch_array($result_about); 

16 echo $ row_about['content'"]; 


251 


| 要 日 驱 动 式 PHP 动态 网 站 开发 实 训 教程 





252 


17 
18 
39 
20 
21 
22 
23 


kz 
</div> 
</div> 
</div> 
</div> 
<!--main 结 束 --> 
<?Php require once('footer.php');?> 


工作 任务 8 网 站 测试 


(fe pe 


能 够 使 用 各 种 测试 方法 对 网 站 进行 测试 。 


SS 知识 目标 
。 掌握 流程 测试 .UI 测试 .链接 测试 .搜索 测试 .表单 测试 .输入 域 测试 .分 页 测试 、 交 
互 性 数据 测试 ,安全 测试 ,网 站 兼容 性 测试 的 应 用 。 
。 掌握 网 站 测试 的 方法 。 
人 三 任务 描述 
本 工作 任务 主要 是 使 用 各 种 测试 方法 对 网 站 进行 全 面 的 测试 ,并 形成 测试 结果 文档 。 
通过 任务 7 的 前 后 台 整 合 .整个 网 站 已 设计 开发 出 来 ,接着 要 对 整个 网 站 进行 测试 ,如 
果 测 试 没 问题 ,将 进入 网 站 发 布 环节 ;如 果 测 试 中 存在 问题 ,将 根据 问题 的 归属 返回 给 相应 
设计 开发 人 员 进行 整改 。 
根据 编者 多 年 的 网 站 设计 与 开发 经 验 , 本 着 实用 性 原则 和 网 站 建设 行业 常用 的 测试 方 
法 ,编者 将 从 几 个 方面 对 网 站 进行 测试 ,具体 的 测试 用 例 不 详细 列 出 ,相关 详细 知识 见 知识 
点 讲解 ,以 下 为 读者 提供 测试 结果 文档 模板 作为 参考 , 见 表 8-1。 
表 8-1 





X XXX 网 站 测试 

测试 流程 存在 的 问题 及 对 问题 的 描述 测试 结果 | 测试 人 员 测试 日 期 
流程 测试 
UI 测试 
链接 测试 
搜索 测试 
表单 测试 
输入 域 测试 
分 页 测试 
交互 性 数据 测试 
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续 表 
XXX 网 站 测试 
测试 流程 存在 的 问题 及 对 问题 的 描述 测试 结果 | 测试 人 员 测试 日 期 
安全 测试 
网 站 兼容 性 测试 

















在 表 8-1 中 , 若 某 个 测试 环节 未 通过 , 则 应 把 测试 结果 反馈 给 相应 的 设计 开发 人 员 进行 


整改 ,整改 完成 后 再 测试 ,测试 通过 后 才 进 入 网 站 的 发 布 环节 。 
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【知识 讲解 】 


1. 关于 网 站 流程 的 测试 

网 站 的 流程 测试 通常 包括 以 下 测试 项 。 

。 使 用 HTMLLinkValidator 将 网 站 中 的 错误 链接 找 出 来 。 

。 测试 的 顺序 为 : 自 顶 向 下 、 从 左 到 右 。 

。 查看 页 面 的 标题 是 否 正确 。( 不 只 是 检查 首页 ,所 有 页 面 都 要 查看 ) 。 

。 Logo 图 片 是 否 正确 显示 。 

。 Logo 下 的 一 级 栏目 、 二 级 栏目 的 链接 是 否 正 确 。 

。 首页 登录 、 注 册 的 功能 是 否 能 实现 。 

。 首页 左 侧 栏目 下 的 文章 标题 .图 片 等 链接 是 否 正确 。 

。 首页 中 间 栏 目下 的 文章 标题 ,图片 等 链接 是 否 正确 。 

。 首页 右 侧 栏目 下 的 文章 标题 .图 片 等 链接 是 否 正确 。 

。 首页 最 下 方 的 “友情 链接 ”关于 我 们 ”等 链接 是 否 正确 。 

。 进入 一 级 栏目 或 二 级 栏目 的 列表 页 。 查 看 左 侧 栏目 名 称 、 右 侧 文章 列表 是 否 正确 。 

。 检查 列表 页 的 分 页 功能 是 否 实现 ,样式 是 否 统一 。 

。 查看 文章 详细 页 面 的 内 容 是 否 存 在 乱码 、 页 面 样式 是 否 统一 。 

。 检查 站 内 搜索 (各 个 页 面 都 要 查看 ) ,确定 功能 是 否 实 现 。 

。 检查 前 后 台 交 互 的 部 分 ,确定 数据 传递 是 否 正确 。 

。 默认 按钮 要 支持 Enter 键 及 选择 操作 , 即 按 Enter 键 后 自动 执行 默认 按钮 对 应 的 

2. 关于 网 站 的 UI 测试 

网 站 UI 测试 通常 包括 以 下 测试 项 。 

。 各 个 页 面 的 样式 风格 是 否 统一 。 

。 各 个 页 面 的 大 小 是 否 一 致 ;同样 的 Logo 图 片 在 各 个 页 面 中 显示 时 是 否 大 小 一 致 ;页 
面 及 图 片 是 否 居中 显示 。 

。 各 个 页 面 的 标题 是 否 正确 。 

。 栏目 名 称 \ 文 章 内 容 等 处 的 文字 是 否 正确 ,有 无 错别字 或 乱码 ,同一 级 别 的 字体 大 
小 .颜色 是 否 统一 。 

。 提示 ,警告 或 错误 说 明 应 清楚 易 懂 ,用 词 准 确 . 气 弃 模棱两可 的 字眼 。 

。 切换 窗口 的 大 小 ,将 窗口 缩小 后 ,页 面 是 否 按 比例 缩小 或 出 现 滚动 条 ;各 个 页 面 缩 小 


工作 任务 8 网 站 测试 





的 风格 是 否 一 致 ,文字 是 否 窗 行 。 

父 窗 体 或 主 窗 体 的 中 心 位 置 应 该 在 对 角 线 焦点 附近 ; 子 窗 体位 置 应 该 在 主 窗 体 的 左 

上 角 或 正中 ;多 个 子 窗 体 弹 出 时 应 该 依次 向 右 下 方 偏 移 ,以 显示 出 窗 体 标题 为 宜 。 

按钮 大 小 基本 相近 ; 忌 用 太 长 的 名 称 ,免得 占用 过 多 的 界面 位 置 ;避免 空旷 的 界面 上 

放置 很 大 的 按钮 ;按钮 的 样式 风格 要 统一 ;按钮 之 间 的 间距 要 一 致 。 

页 面 颜色 应 统一 ;前 景 与 背景 色 搭配 应 合理 协调 ,反差 不 宜 太 大 ,最 好 少 用 深 色 或 刺 

目的 颜色 。 

若 有 滚动 信息 或 图 片 ,将 鼠标 指针 放置 其 上 时 .查看 滚动 信息 或 图 片 是 否 停止 。 

导航 处 是 否 按 相应 的 栏目 级 别 显示 ;导航 文字 是 否 在 同一 行 显示 。 

所 有 的 图 片 是 否 都 被 正确 装载 ,在 不 同 的 浏览 器 、 分 辩 率 下 图 片 是 否 能 正确 显示 ( 包 

括 位 置 , 大 小 ) 。 

文章 列表 页 , 左 侧 的 栏目 是 否 与 一 级 、 二 级 栏目 的 名 称 .顺序 一 致 

调整 分 状 率 ,验证 页 面 格式 是 否 有 错位 现象 。 

鼠标 光标 移动 到 Flash 焦点 上 特效 是 否 实现 ,移出 焦点 特效 是 否 消失 。 

文字 颜色 与 页 面 配色 协调 ,不 使 用 与 背景 色相 近 的 颜色 。 

每 个 非 首 页 静态 页 面 含 图 片 字 节 不 超过 300KB, 全 尺寸 Banner 第 一 个 场景 控制 在 

200KB 以 内 ,第 二 个 场景 在 300KB, 第 三 个 场景 在 400KB, 以 此 类 推 。 

同一 界面 上 的 控件 数 最 好 不 要 超过 10 个 ,多 于 10 个 时 可 以 考虑 使 用 分 页 界面 

显示 。 

超过 一 屏 的 内 容 , 在 底部 应 有 翻 页 按钮 。 

超过 三 屏 的 内 容 , 应 在 头 部 设 提纲 ,直接 链接 到 文 内 锚 点 。 

首页 .各 栏目 一 级 页 面 之 间 互 相 链 接 , 各 栏目 一 级 和 本 栏目 二 级 页 面 之 间 互 相 链 接 ; 

导航 的 文字 要 简明 扼要 ,字数 限制 在 一 行 以 内 。 

报表 显示 时 应 考虑 数据 显示 宽度 的 自 适应 或 自动 换行 。 

所 有 数据 展现 的 界面 (如 统计 查询、 编辑 录入 ,打印 预览 .打印 等 ) ,必须 使 测试 数据 

的 记录 数 超过 一 屏 / 一 页 ,以 验证 满 屏 /页 时 其 窗 体 是 否 有 横向 、 纵 向 滚动 条 或 换 页 

打印 ,界面 显示 是 否 正常 。 

如 有 多 个 系统 展现 同一 数据 源 时 .应 保证 其 一 致 性 。 

对 于 报表 中 的 所 有 字段 值 都 应 该 有 明确 的 定义 ,对 于 无 意义 的 字段 值 ,不 应 该 显示 

为 空 ,应 显示 "一 ”或 “/”, 表 示 该 字段 值 无 意义 。 

对 于 统计 的 数据 ,应 按 用 户 习惯 进行 分 类 ,排序 。 

界面 内 容 更 新 后 系统 应 提供 刷新 功能 。 

用 户 在 退出 系统 后 重新 登录 时 应 考虑 是 否 需要 自动 返回 到 上 次 退出 系统 时 的 界面 。 

在 多 个 业务 功能 组 成 的 一 个 业务 流程 中 ,如 果 各 个 功能 之 间 的 执行 顺序 有 一 定 的 制 

约 条 件 ,应 通过 界面 提示 用 户 。 

用 户 提示 信息 应 具有 一 定 的 指导 性 ,在 应 用 程序 正在 进行 关键 业务 的 处 理 时 ,应 考 

虑 在 前 台 界 面 提示 用 户 应 用 程序 正在 进行 的 处 理 ,以 及 相应 的 处 理 过 程 ,在 处 理 结 

束 后 再 提示 用 户 处 理 完毕 。 

在 某 些 数据 输入 界面 ,如 果 要 求 输入 的 数据 符合 某 项 规则 ,应 在 输入 界面 提供 相应 
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3. 


的 规则 描述 ; 当 输入 数据 不 符合 规则 时 应 提示 用 户 是 否 继续 。 

在 对 任何 配置 信息 修改 后 ,都 应 该 在 用 户 退 出 该 界面 时 提示 用 户 保存 (如 果 用 户 没 
有 主动 保存 ) 。 

在 对 某 些 查询 功能 进行 测试 时 ,应 考虑 查询 条 件 设置 的 合理 性 以 及 查询 结果 的 互补 
性 。 如 某 些 后 台 处 理 时 间 不 应 该 作为 查询 条 件 。 

界面 测试 时 ,应 考虑 某 一 界面 上 按钮 使 用 的 先后 顺序 问题 ,以 免 用 户 对 此 产生 迷惑 。 
例如 只 能 在 查询 成 功 后 显示 执行 按钮 。 

测试 界面 时 ,应 验证 窗口 与 窗口 之 间 、 字 段 与 字段 之 间 的 浏览 顺序 是 否 正确 。 

在 某 些 对 数据 进行 处 理 的 操作 界面 中 ,应 考虑 用 户 可 能 对 数据 进行 处 理 的 频繁 程度 
和 工作 量 , 考 虑 是 否 可 以 进行 批量 操作 。 

界面 测试 时 应 验证 所 有 窗 体 中 的 对 象 状 态 是 否 正 常 ,是 否 符合 相关 的 业务 规则 
应 验证 各 种 对 象 访问 方法 (Tab 健 、 鼠 标 移动 和 快捷 键 ) 是 否 可 正常 使 用 ,并 且 在 一 
个 激活 界面 中 快捷 键 无 重复 。 

界面 测试 不 仅 要 考虑 合理 的 键盘 输入 ,还 应 考虑 是 否 可 以 通过 鼠标 复制 及 粘贴 来 
输入 。 

对 于 统计 查询 功能 的 查询 结果 应 验证 其 是 否 只 能 通过 界面 上 的 查询 或 刷新 按键 人 
工 触发 ,应 避免 其 他 形式 的 触发 。 

对 界面 上 的 任何 对 象 进行 拖拉 ,然后 进行 查询 .打印 ,应 保证 查询 打印 的 结果 不 变 。 
应 确保 数据 精度 显示 的 统一 : 如 单价 为 0 元 ,应 显示 为 0.00 元 。 

确保 时 间 及 日 期 显示 格式 的 统一 。 

确保 具有 相同 含义 的 属性 /字段 名 的 统一 。 


居中 。 
关于 网 站 的 链接 测试 


网 站 链接 测试 通常 包括 以 下 的 测试 项 。 


页 面 是 否 有 无 法 链接 的 内 容 ; 图 片 是 否 能 正确 显示 ,有 无 元 余 图 片 , 代 码 是 否 规 范 ， 
页 面 是 否 存 在 死 链 接 (可 以 用 HTMLLinkValidator 工具 查找 ) 。 

图 片上 是 否 有 无 用 的 链接 ; 单 击 图 片上 的 链接 是 否 跳 转 到 正确 的 页 面 。 

首页 单 击 Logo 下 的 一 级 栏目 或 二 级 栏目 名 称 ,是 否 可 进入 相应 的 栏目 。 

单 击 首页 或 列表 页 的 文章 标题 的 链接 .是否 可 进入 相应 文章 的 详细 页 面 。 

单 击 首页 栏目 名 称 后 的 “更 多 ”链接 ,是 否 正确 跳 转 到 相应 页 面 。 

文章 列表 页 左 侧 栏目 的 链接 ,是 否 可 正确 跳 转 到 相应 的 栏目 页 面 。 

导航 链接 的 页 面 是 否 正确 ;是 否 可 按 栏目 级 别 跳 转 到 相应 的 页 面 ;( 例 如 : 首页 一 服 
务 与 支持 一 客服 中 心 ,可 分 别 单 击 “ 首 页 “服务 与 支持 ”客服 中 心 ”, 查 看 是 否 可 跳 
转 到 相应 页 面 )。 

新 闻 、 信 息 类 内 容 通常 在 新 窗口 中 打开 。 

顶部 导航 、 底 部 导航 通常 在 本 页 打开 。 
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4. 关于 网 站 的 搜索 测试 

网 站 进行 搜索 测试 时 通常 包括 以 下 测试 项 。 

搜索 按钮 的 功能 是 否 能 实现 。 

输入 网 站 中 存在 的 信息 ,能 否 正确 搜索 出 结果 。 

输入 键盘 中 所 有 的 特殊 字符 是 否 报错 .应 特别 关注 < ? ” . 。\/ 一 ;” 等 特殊 字符 。 
系统 是 否 支持 Enter 键 、Tab 键 。 

搜索 出 的 结果 页 面 是 否 与 其 他 页 面 风格 一 致 。 

在 输入 域 中 输入 空格 , 单 击 后 搜索 系统 是 否 报错 。 

。 本 站 内 搜索 输入 域 中 不 输入 任何 内 容 , 是 否 搜索 出 的 是 全 部 信息 或 者 给 予 提示 
信息 。 

是 精确 查询 还 是 模糊 查询 ,如 果 是 模糊 查询 .可 输入 类 似 “ 中 % 国 ”格式 的 内 容 , 其 查 
询 结 果 表示 包含 中 国 两 个 字 的 信息 。 


搜索 输入 域 是 否 实现 Enter 键 的 监听 事件 。 

5. 关于 网 站 的 表单 测试 

网 站 表单 测试 通常 包括 以 下 的 测试 项 。 

。 注册 、 登 录 功能 是 否 实现 。 

。 提交 ,清空 按钮 的 功能 是 否 能 实现 。 

。 修改 表单 与 注册 页 面 数 据 项 是 否 相同 ,修改 表单 是 否 对 重 名 做 验证 。 

。 提交 的 数据 是 否 能 正确 保存 到 后 台数 据 库 中 (后 台数 据 库 中 的 数据 应 与 前 台 录 入 的 
内 容 完全 一 致 ,数据 不 会 丢失 或 被 改变 ) 。 

对 表单 进行 提交 、 删 除 、 修 改 后 是 否 有 提示 信息 ;提示 、 警 告 或 错误 说 明 应 该 清楚 、 明 
了 \ 恰 当 。 

浏览 器 的 前 进 、 后 退 、 刷 新 按钮 是 否 会 造成 数据 重 现 或 页 面 报错 。 

。 提交 表单 是 否 支持 Enter 键 和 Tab 键 ;Tab 键 的 顺序 与 控件 排列 顺序 要 一 致 ,目前 
流行 总 体 从 上 到 下 .同时 行 间 从 左 到 右 的 方式 。 

下 拉 列 表 功 能 是 否 实现 和 数据 是 否 完整 (例如 省 份 和 市 区 下 拉 列 表 数 据 是 否 
互动 )。 

6. 关于 网 站 的 输入 域 测试 

网 站 的 输入 域 测试 通常 包括 以 下 的 测试 项 。 

。 对 于 手机 、 邮 箱 、 证 件 号 等 的 输入 是 否 有 长 度 及 类 型 的 控制 。 

。 中 文 ,英文 数字、 特殊 字符 (特别 注意 单 引号 和 反 斜 杠 ) 及 这 四 类 的 混合 输入 ,是 否 
会 报错 。 

输入 空格 “空格 十 数据 “数据 十 空格 "时 是 否 报 错 。 

输入 HTML 语言 的 二 head ,是 否 能 正确 显示 。 

输入 全 角 、 半 角 的 英文 数字、 特殊 字符 等 ,是 否 报 错 。 

是 否 有 必 填 项 的 控制 ;不 输入 必 填 项 ,是 否 有 友好 提示 信息 。 

输入 超 长 字段 .页 面 是 否 被 撑 开 。 

分 别 输入 大 于 、 等 于 、 小 于 数据 表 规 定 字 段 长 度 的 数据 时 是 否 报错 。 
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。 输入 非 数 据 表 中 规定 的 数据 类 型 的 字符 时 是 否 有 友好 提示 信息 。 

。 在 文本 框 中 按 Enter 键 ,显示 时 是 否 是 回 车 换行 符 。 

。 非法 的 输入 或 操作 应 有 足够 的 提示 说 明 。 

7. 关于 网 站 的 分 页 测试 

网 站 分 页 测试 通常 包括 以 下 的 测试 项 。 

。 当 没 有 数据 时 ,首页 、 上 一 页 、 下 一 页 、 尾 页 标签 全 部 置 为 灰色 。 

。 在 首页 时 ,“ 首 页 “上 一 页 ”标签 置 灰色 ;在 尾 页 时 ,“ 下 一 页 ”“ 尾 页 "标签 置 灰 色 ; 在 
中 间 页 时 ,四 个 标签 均 可 单 击 , 且 跳 转正 确 。 

。 翻 页 后 ,列表 中 的 数据 是 否 仍 按照 指定 的 顺序 进行 了 排序 。 

。 各 个 分 页 标签 是 否 在 同一 水 平 线 上 。 

。 各 个 页 面 的 分 页 标签 样式 是 否 一 致 。 

。 分 页 的 总 页 数 及 当前 页 数 显示 是 否 正 确 。 

。 是 否 能 正确 跳 转 到 指定 的 页 数 。 

。 在 分 页 处 输入 非 数 字 的 字符 (英文 特殊 字符 等 ), 输 入 0 或 超出 总 页 数 的 数字 ,是 否 
有 友好 提示 信息 。 

。 是 否 支持 对 Enter 键 的 监听 。 

8. 关于 网 站 的 交互 性 数据 测试 

网 站 的 交互 性 数据 测试 通常 包括 以 下 测试 项 。 

前 台 的 数据 操作 是 否 对 后 台 产 生 相应 正确 的 影响 。 

可 实现 前 后 台数 据 的 交互 (如 ,在 线 咨 询 能 否 实现 数据 的 交互 实时 更 新 ) ;数据 传递 

是 否 正确 ;前 后 台大 数据 量 信 息 传递 数据 是 否 丢 失 ( 如 500 个 字符 ); 多 用 户 交流 时 

用 户 信息 控制 是 否 严谨 。 

用 户 的 权限 ,是 否 随 着 授权 而 变化 。 

数据 未 审核 时 ,前 台 应 不 显示 ;审核 通过 后 ,前 台 应 可 显示 该 条 数据 ;功能 测试 中 还 

需 注意 以 下 几 点 内 容 : @ 单 击 * 收 藏 我 们 ”标题 是 否 出 现 乱 码 ;收藏 的 URL 与 网 站 

的 URL 是 否 一 致 ;能 否 通过 收藏 夹 来 访问 网 站 。@ 对 于 修改 、 删 除 等 可 能 造成 数据 

无 法 恢复 的 操作 必须 提供 确认 信息 ,给 用 户 放 弃 选 择 的 机 会 。@@ 在 文章 详细 页 面 ， 

验证 字体 大 小 改变 .打印 .返回 .关闭 等 功能 是 否 已 经 实现 。 

9. 关于 网 站 的 安全 性 测试 

网 站 的 安全 性 测试 通常 包括 以 下 的 测试 项 。 

。 在 测试 路 径 上 ,看 是 否 出 现 目录 下 文件 。 

。 访问 文件 目录 如 果 出 现 403 错误 .说明 网 页 有 限制 而 拒绝 访问 。 

访问 文件 目录 如 果 出 现 SSH 其 他 根 目录 ,说 明 有 漏洞 缺陷 。 

。 用 X-Scan-v3.2-cn 工具 对 网 站 服务 器 扫描 ,可 以 显示 出 已 开启 的 端口 号 .SSH 弱 口 

令 、 网 站 是 否 存在 高 风险 ;比如 ,在 扫描 参数 中 输入 测试 网 站 的 地 址 ,然后 开始 扫描 ， 

如 果 扫 描 出 网 站 端口 号 存在 高 风险 或 SSH 弱 口 令 , 可 以 与 开发 人 员 沟 通 并 进行 

修改 。 

测试 有 效 和 无 效 的 用 户 名 和 密码 .要 注意 到 是 否 大 小 写 敏感 ,尝试 次 数 的 限制 ,是 否 

可 以 不 登录 而 直接 浏览 某 个 页 面 等 。 
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网 站 是 否 有 超时 的 限制 ,也 就 是 说 ,用 户 登录 后 在 一 定时 间 内 (例如 15 分 钟 ) 没 有 单 
击 任何 页 面 ,是 否 需 要 重新 登录 才能 正常 使 用 。 
为 了 保证 网 站 的 安全 性 ,日 志文 件 是 至 关 重 要 的 。 需 要 测试 相关 信息 是 否 写 进 了 日 
志文 件 .是 否 可 追踪 。 
当 使 用 了 安全 套 接 字 时 ,还 要 测试 加 密 是 否 正确 ,检查 信息 的 完整 性 。 
服务 器 端的 脚本 常常 构成 安全 漏洞 ,这些 漏洞 又 常常 被 黑客 利用 ,所 以 ,还 要 测试 如 
果 没 有 经 过 授权 ,就 不 能 在 服务 器 端 放 置 和 编辑 脚本 的 问题 。 
网 页 加 载 速 度 测试 可 以 采用 HttpWatch 软件 等 ,可 以 知道 哪些 内 容 影 响 网 站 的 整 
体 速 度 。 

10. 关于 网 站 的 浏览 器 兼容 性 测试 

浏览 器 是 互联 网 产品 客户 端的 核心 软件 ,也 是 网 站 访问 的 必 备 软件 。 不 同 厂商 的 浏览 
器 对 Java、JavaScript、ActiveX、plin-ins、CSS 的 支持 也 各 有 差异 ,即使 是 同一 厂家 的 浏览 
器 ,也 会 存在 不 同 版 本 的 问题 。 

对 于 一 名 互联 网 开发 人 员 来 说 ,在 自己 开发 一 款 应 用 之 前 ,一 定 需要 先 了 解 现在 人 们 所 
使 用 的 浏览 器 的 现状 : 人 们 都 习惯 使 用 什么 样 的 浏览 器 ? 他 们 使 用 的 是 哪 一 个 版 本 ? 是 低 
级 的 还 是 高 级 的 版 本 ? 等 等 ,这 些 都 是 需要 事先 弄 清楚 的 。 所 以 ,对 当今 互联 网 市 场 上 的 浏 
览 器 现状 有 一 个 好 的 分 析 是 有 必要 的 。 

根据 百度 统计 的 最 新 数据 显示 ,在 2016 年 2 月 国内 浏览 器 市 场 上 ,霸主 Chrome 的 份 
额 仍 延续 上 升 趋势 , 比 1 月 份 增加 1.98% ,成 功 突破 40%, 达 到 40.62%。 而 亚军 IE 的 份额 
则 再 次 遭 到 蚕食 ,减少 1.93%, 降 至 31. 81%。 另 外 ,搜狗 高 速 浏览 器 排名 下 降 , 从 第 3 滑 至 
第 5, 与 此 同时 ,2345 与 QQ 浏览 器 的 排名 各 升 1 位 ,分 获 第 3、4 名 。 各 浏览 器 国内 市 场 占 
比分 布 图 如 图 8-1 所 示 。 





Chrome 
mIE 
2345 
OO 

加 地 和 狗 遍 速 
查 猎 钓 


由 其 他 





图 8-1 


在 2016 年 2 月 全 球 浏览 器 市 场 上 ,IE 凭借 44.79% 的 份额 打败 众多 浏览 器 ,蝉联 第 一 。 
Chrome 排名 紧 随 其 后 ,份额 为 36. 56%。 接 下 来 ,Firefox、Safari 与 Opera 分 别 坚 守 第 3 一 
5 名 ,所 占 份额 依次 为 11.68% 、4. 88%、1.68%, 全 球 浏览 器 版 本 市 场 份额 如 图 8-2 所 示 。 

由 以 上 数据 分 析 得 知 ,目前 主流 的 浏览 器 有 : IE 浏览 器 .Chrome 浏览 器 .2345 浏览 器 、 
Firefox 浏览 器 ,搜狗 高 速 浏览 器 、 猫 鹏 浏览 器 ,另外 ,国内 使 用 360 浏览 器 的 用 户 也 逐渐 增 
多 。 因 此 ,在 做 网 站 兼容 性 测试 时 ,不 要 求 做 到 兼容 所 有 浏览 器 ,但 至 少 要 兼容 目前 主流 的 
浏览 器 。 
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2016 年 2 用 全球 浏 览 器 版 本 市 场 份 额 TOP10 
来 源 : NetApplications 
> 23.16% 


1 
22.10% 










Chrome47.0 ii 2.40% 
0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 
8-2 


网 站 的 浏览 器 兼容 性 测试 是 件 很 费时 的 事情 ,幸运 的 是 有 很 多 优秀 的 工具 可 以 帮助 测 
试 浏览 器 的 兼容 性 ,以 下 编者 为 大 家 介绍 一 些 测试 工具 ,如 表 8-2 所 示 。 



































表 8-2 
测试 工具 说 明 
Spoon Browser 单 击 需 要 测试 的 浏览 器 环境 ,安装 插件 就 可 以 进行 测试 了 。 可 以 帮助 你 测试 网 
Sandbox 页 在 Safari.Chrome、Firefox 和 Opera 浏览 器 中 的 显示 是 否 正 常 
ee 这 是 微软 自己 发 布 的 跨 浏 览 器 测试 工具 ,可 以 同时 查看 网 页 在 多 个 浏览 器 的 呈 
ER 现 情况 ,对 页 面 排版 进行 直观 的 比较 
IETester 专门 用 于 测试 网 页 在 下 浏览 器 各 个 版 本 中 兼容 性 的 工具 ,包含 IE5. 5 至 IE9 的 
各 个 版 本 ,是 一 款 很 不 错 的 工具 
ES BrowserShots 是 一 款 免费 的 跨 浏 览 器 测试 工具 ,捕捉 网 站 在 不 同 浏览 器 中 的 截 
图 。 这 是 最 有 名 、 也 是 最 古老 的 浏览 器 兼容 性 测试 工具 
Multiple IEs 这 款 工具 同样 用 于 测试 网 页 在 IE 浏览 器 中 各 个 版 本 的 兼容 性 
Viewlike 一 款 新 推出 的 工具 ,帮助 你 检查 浏览 器 在 不 同 分 辩 率 下 的 呈现 情况 
BrowserSeal 这 款 工 具 的 两 个 主要 特色 是 独立 的 浏览 器 支持 和 带 有 自动 化 脚本 的 命令 行 界 面 
B Browsera 是 一 个 可 测试 网 站 的 跨 浏览 器 布局 的 工具 ,可 以 看 到 网 站 上 存在 的 兼 
rowsera y 
容 性 错误 
WebDevLab 这 款 工具 专门 用 于 测试 网 站 在 苹果 Safari 浏览 器 中 是 什么 样子 
. 这 个 工具 可 以 用 于 检查 网 站 在 多 个 浏览 器 中 的 呈现 情况 ,可 以 跟踪 Bug 并 创建 
Litmus 报告 
这 个 工具 是 要 付费 的 ,可 以 用 于 检查 JavaScript 和 DHTML, 可 提供 不 同 的 测试 
Browsercam 环境 平台 
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54 


(Cf nf 


能 够 在 互联 上 发 布 PHP 网 站 ,并 熟悉 相关 的 操作 。 


(SA 知识 目标 
。 掌握 域名 知识 及 熟悉 域名 解析 操作 。 
。 掌握 虚拟 主机 知识 及 熟悉 绑 定 域名 的 操作 。 
。 掌握 FTP、Navicate 等 相关 工具 的 使 用 方法 。 
。 熟悉 网 站 备案 的 相关 知识 。 


par 
\ 三 任务 描述 

本 工作 任务 主要 是 购买 虚拟 主机 和 域名 ,并 把 网 站 部 署 到 虚拟 主机 上 ,最 终 实现 在 互联 
网 上 发 布 网 站 的 效果 。 





9.1 注册 域名 


提供 域名 服务 的 企业 非常 多 ,编者 建议 找 诸 如 西部 数码 、 易 名 中 国 、 阿 里 云 . 新 网 、 美 检 
互联 ,广州 新 一 代数 据 中 心 等 较 有 名 的 IDC 提供 商 注 册 域 名 ,当然 价格 会 比 普通 的 IDC 提 
供 商 要 贵 一 点 。 以 下 以 广州 新 一 代数 据 中 心 为 例 ,介绍 如 何 注册 域名 。 

第 一 步 , 进 入 广州 一 代数 据 中 心 官方 网 站 http://www. gzidc. comy 。 

第 二 步 , 注 册 成 为 会 员 。 

第 三 步 , 使 用 第 二 步 注 册 的 会 员 信 息 ,登录 广 州 一 代数 据 中 心 官方 网 站 。 

第 四 步 , 单 击 导航 栏 上 的 “域名 注册 ”, 在 域名 输入 框 中 输入 域名 ,并 单 击 “ 查 询 ” 按 钮 , 查 
询 该 域名 是 否 被 注册 了 。 若 未 被 注册 , 就 可 以 使 用 该 域名 注册 。 下 面 以 域名 
gudaochaxiang. com 为 例 进行 说 明 ,具体 操作 步骤 如 下 。 

步骤 一 : 输入 要 注册 的 域名 ,如 图 9-1 所 示 。 

步骤 二 : 查询 该 域名 是 否 被 注册 了 , 若 未 被 注册 , 则 可 以 注册 ,如 图 9-2 所 示 。 

步骤 三 : 选择 “选择 此 域名 ”, 并 单 击 * 确 定购 买 ?按钮 ,如 图 9-3 所 示 。 
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| xss 
Www | gudaocnanang .还 可 以 还 加 17 个 二 名 后 和 
国 com 酮 国 o 枫 国 "net 酮 国 top 酮 org comcn netcn org cn 
biz info 网 店 CC 也 name mobi me 
co so 
查看 更 多 
图 9-1 
域名 注册 ”域名 信息 查询 ( WHOIS ) 域名 举报 
二 名 域名 生态 价格 信息 
本 ¥88 00 元 1 年 ED 
gudaochaxiang cn 未 注册 ¥58.00 元 /1 年 | 国运 择 此 域名 
gudaochaxang net 未 注册 ¥88.00 元 /1 年 ”| 团 运 院 比 过 名 
gudaochaxiang top 未 注册 ¥5.007511 年 ”加 运 适 此 域名 
EE 
图 9-2 
域名 注册 域名 信息 查询 ( WHOIS 】 域名 举报 
域名 域名 村 态 价格 信 息 
gudaochaxiang com 未 注册 羊 88.00 元 /1 年 (GaEiba 
gudaochaxiang cn 未 注册 ¥58.00 元 /1 年 "| 回 于 所 此 坟 各 
gudaochaxang net 未 注册 ¥88 .00 元 /1 年 ， 团 迁 皖 比 域名 
= 
gudaochaxlangtop 未 注册 ¥5.00 元 /1 年 ME 
| 
图 9-3 


步骤 四 : 在 进入 的 页 面 中 填写 相关 信息 ,包括 注册 人 信息 、 管 理 人 信息 、 技 术 人 信息 、 付 
费 人 信息 ,填写 完成 后 ,选择 “同意 购买 协议 ”选项 ,接着 单 击 * 加 入 购物 车 ”按钮 ,该 购买 订单 
就 产生 了 ,然后 进入 付款 环节 ,付款 成 功 就 意味 着 域名 注册 成 功 了 。 来 到 会 员 中 心 , 单 击 “ 我 
的 产品 ”, 青 单 击 “ 域 名 ”, 就 可 以 看 到 注册 的 域名 ,如 图 9-4 所 示 。 














编号 全 域名 全 产品 供应 商 人 时间 全 到 对 时 间 地 状态 全 所 属 订单 控制 面板 
了 722087 ee com 甘 文 国际 域名 商务 中 国 2016-0104 23:48-33 2017-01-04 23.48-33 已 开启 2496462 登录 
图 9-4 
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步骤 五 : 单 击 “ 登 录 ” 按 钮 ,进入 到 控制 面板 就 可 以 看 到 域名 的 基本 信息 ,如 图 9-5 
所 示 。 








:7 UD 大 在 。 启用 中 
注册 日 期 : 。 2016-01-04 23:48-33 到 期 时 间 : 2017-01-04 15.48-38 
注册 商 。 商务 中 国 ponycode; Wjianing com 
DNs 服 务 种 | 修改 
DNS1: ns5gzidccom DNS2: ns6 gzidccom 


登录 注册 商 域 名 管理 平台 ( 登录 后 可 皖 作 途 改 域名 管理 信息 、 艾 取 域名 证 书 等 ) 
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步骤 六 : 单 击 左 侧 的 “解析 管理 ,进入 域名 解析 页 面 , 然 后 单 击 * 添 加 记录 ”按钮 进入 添 
加 记录 页 面 ,如 图 9-6 所 示 。 
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在 图 9-6 中 ,主机 记录 填写 www, 记 录 类 型 选择 A, 记 录 值 为 你 购买 虚拟 主机 的 IP 地 
址 ,MX 优先 级 可 以 不 填 , 然 后 单 击 “ 保 存 ” 按 钮 ,就 成 功 添加 了 一 条 A 记录 。 该 记录 生效 
后 ,就 可 以 在 浏览 器 中 输入 地 址 http://www. gudaochaxiang. com 访问 网 站 了 。 

注意 : 若 还 没有 虚拟 主机 ,本 步骤 可 以 先 忽略 , 待 购买 了 虚拟 主机 后 再 做 域名 解析 。 

继续 添加 一 条 A 记录 ,使 得 在 浏览 器 中 输入 地 址 http://gudaochaxiang. com 也 能 访问 
网 站 ,其 操作 与 添加 前 一 条 A 记录 的 操作 基本 一 样 .不 同 的 是 主机 记录 文本 框 要 注意 留 空 
即 可 。 

至 此 ,域名 注册 及 域名 解析 操作 已 完 

芒 | 注意: 不 同 的 IDC 服务 提供 商 的 域名 管理 面板 不 同 ,操作 的 方法 也 不 同 ,但 是 要 实 
现 的 最 终 目 的 是 一 样 的 ,就 是 注册 购买 了 域名 并 做 好 了 域名 解析 。 


263 


项 目 驱 动 式 PHP 动态 网 站 开发 实 训 教程 





92 购买 虚拟 主机 


提供 虚拟 主机 服务 的 企业 也 非常 多 ,如 西部 数码 、 易 名 中 国 、 阿 里 云 . 新 网 .美术 互 联 、 广 州 
新 一 代数 据 中 心 等 。 以 下 以 广州 新 一 代数 据 中 心 为 例 讲授 如 何 购 买 虚拟 主机 及 注意 事项 。 

在 9. 1 节 中 已 经 注册 成 为 广州 新 一 代数 据 中 心 会 员 了 ,因此 直接 登录 广州 新 一 代数 据 中 
心 网 站 并 打开 虚拟 主机 页 面 。 以 下 为 读者 介绍 购买 虚拟 主机 的 过 程 ,具体 的 操作 步骤 如 下 。 

步骤 一 : 确定 所 要 购买 的 虚拟 主机 的 类 型 。 可 选择 购买 国内 的 虚拟 主机 或 购买 海外 虚 
拟 主机 ,比如 中 国 香港 的 主机 、 美 国 的 主机 ,要 根据 客户 的 情况 来 确定 。 国 内 的 虚拟 主机 只 
有 网 站 通过 备案 后 才能 正常 使 用 ,国外 的 虚拟 主机 开通 后 可 以 直接 使 用 ,不 需要 备案 。 根 据 
问 道 茶具 有 限 公 司 营 销 员 小 李 的 要 求 ,开通 了 国内 的 虚拟 主机 ,并 选择 基础 型 空间 ,然后 选 











飓风 2(S) 后 
Ra: 200W 回 增加 3 站 tiP 
tA 流量 : 40C 206 图 电信 240 00 元 1 


贱 直 线 : 420150 加 双 纸 340 00 元 1 











> Windowa 或 者 Linux 平 台 
> 200M 网 页 附送 邮局 
> MASP (WindowsyPHP(LInun) 





> Access(Windowsy30M MYSQL 数据 车 (Linug 
> 适合 个 人 用户 小 型 企业 
> 侨 速 低 成 本 地 促 建 网 上 阴 辐 
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步骤 二 : 单 击 * 立 即 购买 "按钮 进入 购买 付款 环节 。 在 该 环节 中 应 注意 ,网 站 的 开发 语 
言 是 PHP, 因 此 在 选择 主机 类 型 的 时 候 , 应 选择 PHP 类 型 的 主机 (如 图 9-8 所 示 ) ,在 付款 
成 功 后 ,虚拟 主机 就 成 功 购买 了 。 








虚拟 主机 
产品 名 称 网 Rl2s 型 ( 单 经 ) 买 2 皇 送 1 后 E 
选择 购买 时 限 图 24000 元 /1 年 辐 480 00 元 /12 年 园 960000 点 /1 年 园 19.200 00 点 /2 年 
纪 定 情 名 ” [ | 
RT 
主机 类 型 @ PHP5#H Asp 机 
线路 图 电信 单 疆 
管理 帐号 webmaster@yourdomain 
管理 刘 友 素 纺 动 生成 
购 开 协议 国 匠 已 吧 网 交 理 纺 并 按 关 内 买办 溢 
Ea 
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步骤 三 : 来 到 会 员 中 心 . 单 击 左 侧 的 “我 的 产品 “主机 ”, 就 可 以 看 到 已 购买 的 主机 列 
表 , 如 图 9-9 所 示 。 








00935 -J 故 风 2= 型 ( 羊 颖 ) 2015-03-17 19-27.35 2018.03.17 192736 已 开启 2290701 登录 
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步骤 四 : 单 击 * 登 录 ” 按 钮 ,来 到 主机 控制 面板 ,并 单 击 左 侧 * 网 站 基础 环境 配置 ?下 的 
“主机 域名 绑 定 ”, 此 时 的 页 面 如 图 9-10 所 示 。 





域名 纺 定 
主机 域名 乡 定 星 指 棕 多 个 域名 乡 定 到 一 个 主机 上 ， 尹 定 后 域名 顶 解 析 生 效 后 才能 正常 访问 ， 解 析 状 态 可 能 注 后 ， 仅 供 参考 , 


您 的 已 绑 定 域名 中 包含 -Unauthorised 后 过 字符 率 ， 不 能 访问 网 站 。 和 您 现在 可 以 : 
，。 如 果 域 名 备 宏 不 成 功 ， 请 立即 备 宕 ,如果 需要 帮助 请 站 看 备 安 专 题 ; 
。 如 果 域 名 备 宕 成 功 ， 系 统 榜 自 动 去 掉 `-unauthorised 字 符 率 ， 如 未 及 时 去 掉 ， 请 添加 一 个 未 芝 -unauthorised" 的 相同 域名 。 


3581933.sn49.gzonet. net 5 
| 


mr 因 王 




















图 9-10 


在 文本 框 中 分 别 添加 www. gudaochaxiang. comt 和 gudaochaxiang. com, 最 后 单 击 “ 提 
交 修 改 ” 按 钮 ,完成 域名 的 绑 定 操作 。 

倒 注 意 : 若 未 注册 域名 ,该 步骤 需 等 到 注册 好 域名 后 再 进行 操作 。 

至 此 ,购买 虚拟 主机 及 绑 定 域名 的 操作 已 完成 。 

地 注意 不 同 的 虚拟 主机 提供 商 ,其 购买 虚拟 主机 的 流程 和 虚拟 主机 管理 面板 是 不 同 
的 ,但 最 终 目 的 是 一 样 的 , 即 购买 虚拟 主机 ,并 做 好 域名 绑 定 操作 。 

虚拟 主机 购买 好 后 , 接 下 来 就 可 以 把 本 地 数据 库 数据 及 网 站 的 源 文件 在 虚拟 主机 上 应 
用 了 ,具体 操作 步骤 如 下 。 

步骤 一 : 导出 该 网 站 数据 库 的 SQL 文件 (可 使 用 第 三 方 的 工具 实现 ) ,并 使 用 记事 本 将 
其 打开 ,然后 将 /web/admin /将 换 成 /admin/ ,因为 在 本 地 端 ,整个 网 站 的 源 文 件 是 放 在 根 目 
录 (www 文件 夹 ) 下 的 web 文件 夹 中 ,但 上 传 到 虚拟 主机 后 ,网 站 的 源 文件 是 放 在 根 目录 下 
的 ,因此 需要 更 改 后 台 上 传 的 图 片 及 相关 文件 的 路 径 。 

步骤 二 : 在 虚拟 主机 管理 面板 中 创建 MySQL 数据 库 , 并 把 相关 的 数据 库 信息 (数据 库 
服务 器 的 IP 地 址 、 用 户 名 、 密 码 ,数据库 名 称 ) 更 新 到 conn. php 文件 中 。 

步骤 三 : 利用 第 三 方 工具 (如 Navicat) 连 接 步骤 二 中 创建 的 数据 库 , 执 行 SQL 文件 ,此 
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时 网 站 数据 库 信息 已 部 署 到 远程 MySQL 服务 器 上 。 


步骤 四 : 利用 FTP 工具 ,把 web 目录 下 的 所 有 文件 上 传 至 虚拟 主机 。 
此 时 ,整个 网 站 已 在 远程 服务 器 上 实施 了 。 


93 网 站 备案 


网 站 备案 是 指向 主管 机 关 报 告 事由 存 案 以 备查 考 。 以 下 以 新 一 代数 据 中 心 为 例 讲授 如 
何 进行 网 站 备案 ,详细 的 操作 步骤 如 下 。 

步骤 一 : 登录 广州 新 一 代数 据 中 心 网 站 ,并 进入 会 员 中 心 。 

步骤 二 : 单 击 会 员 中 心 左 侧 的 “网 站 备案 栏目 ”, 进 入 网 站 备案 页 面 ,并 根据 实际 情况 在 
以 下 三 种 类 型 中 进行 选择 ,如 图 9-11 所 示 。 














2》> 网 站 备案 信息 录入 信息 
您 身份 证 或 单位 证 件 从 未 进行 
备案 转 入 将 原 未 已 备案 的 网 站 转移 至 侈 万邦 
过 3 让 备案 ， 请 点 此 进入 注册 并 
的 的 添加 网 站 直接 在 原 备案 号 下 增加 新风 站 
图 9-11 
与 问 道 茶具 有 限 公司 的 营销 人 员 小 李 核 实 得 知 ,该 公司 从 未 进行 过 网 站 的 备案 ,因此 选 


择 “ 首 次 备案 ”, 并 进入 到 备案 信息 录入 页 面 ,该 页 面 是 按 信息 类 别 进行 排版 的 。 由 于 该 页 面 
篇 幅 较 大 ,因此 按照 类 别 从 上 到 下 的 顺序 进行 显示 。 
选择 ICP 备案 主体 信息 ,如 图 9-12 所 示 。 














ICP 备 案 主体 信息 

主办 单位 名 称 

主办 单位 性 所 企业 ~ 注意 : 网 站 内 容 为 企业 网 站 不 能 使 用 个 人 性 质 来 备案 
主办 单位 有 效 证 件 类 型 * 工商 营 直 执照 号 到 ~ 



































主办 单位 有 效 证 件 号 宫 * 主意 ; 企 站 网 站 主办 单位 有 效 证 件 号 码 不 能 坪 个 人 身份 证 号 
组 织 机 构 代码 证 8 位 数字 字母-! 位 数字 或 [个 字 鲸 ' 如 0011231231-1。 
主办 单位 有 效 证 件 住所 * 
np 生意 ;1 没有 上 加 主管 单位 请 请 写 绢 主办 单位 名称 一 样 2. 不 能 包含 工商 局 , 卫生 局 
主办 单位 所 在 省 / 市 / 县 * 北京 市 FE ~ 东城 区 ~ 
主办 单位 详细 通信 地 址 e 北京 市 东城 区 








请 精确 填写 到 门牌 号 . 填写 完 后 请 认真 检查 
9-12 

填写 主办 单位 负责 人 基本 情况 ,如 图 9-13 所 示 。 

主办 单位 相关 证 件 上 传 如 图 9-14 所 示 。 

增加 网 站 信息 ,如 图 9-15 所 示 。 
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主办 单位 负责 人 基本 情况 
姓名 
有 效 证 件 类 型 * 身份 证 了 
负责 人 有 效 证 件 号 码 + 人 
台 胜 Eo 位 
办 公 电 话 * 人 和 区 呈 衣 的 0 计 二 夫 ) 
上 E 注意 : 主办 单位 性 质 为 “个 人 ”对 可 不 二 写 
ny 1 至 要 二 页 
手机 号 如 村 别 失 本 请 训 实 十 写 芝 记 的 联系 人 本 人 的 手机 号 码 ， 若 手机 号 码 二 写 非 本 人 ， 视 为 备案 信息 席 候 ， 拘 会 注销 备案 号 
中 国联 通 (或 中 国电 信 ) 手机 号 码 in 
全 a ei 
二 有 克 个 不 9 于 机 号 码 , 如 黎 动 、 联 表 的 号 码 才 丰 忆 ,以便 名 案 术 
Gd 








图 9-13 











主办 单位 相关 证 件 上 传 只 人 允许- jpe 文 件 上 传 ， 大 小 在 20083 以 内 ) 



















































































主办 单位 有 并 证 件 原件 扫 剖 件 上 传 ( 企 业 备 案 请 上 伟 营 北 岂 照 带 有 年 Eo | 
检 贾 的 副本 招手 件 )" 人 庆生 才 单 有效 证 有 到 
2 加 
主办 单位 员 责 人 有 效 证 件 原件 扫 指 件 上 传 身份 下 )* i: 
备注 : 
必须 4 应- 主 办 单 员 责 大 有 效 证 件 虽 到 
主办 单位 员 责 人 法 人 授权 书 扫 掉 件 上 传 攻 二 
网 备案 信息 真实 性 核验 单 扫 损 件 上 人 + 
负责 人 现场 拍 昭 相片 扫 扩 件 上 传 。 
EE 
首页 | i 
(i 不 加 http:1/， 在 域名 列表 中 要 存在 ， 不 能 起 过 2ss 个 字符 ,需要 加 mw， 到 
ee 卦 FA 主 域 名 不 如 rm。 每 和 一个 二 名 
加 中 文 简体 回 中 文昌 体 回 维尔 语 因 只 攻克 滞 回 柯 外 过 玫 语 
类 到 回 椅 上河 回 巷 再 固守 目 翰 条 回 条文 
捕 根 所 同 站 发 布 的 内 容 世 际 选择 ) 回 苗 厅 回 英 再 回 日 语 加 法语 回 钦 8 斯 汪 
加 本 旧 下 语 加 阿拉伯 





图 9-15 


倒 注 意 : 根据 编者 多 年 的 经 验 ,若是 企业 网 站 备案 ,网 站 名 称 通常 按 “X X XX XX 公 
司 门户 网 站 "形式 填写 。 

填写 网 站 负责 人 的 基本 情况 ,如 图 9-16 所 示 。 

填写 完成 以 上 信息 后 ,车 有 信息 未 确定 或 未 填写 完整 ,可 以 单 击 “ 保 存 为 草稿 "按钮 ,下 次 
登录 后 继续 填写 。 若 已 确认 信息 无 误 了 ,可 以 单 击 "完成 ICP 备案 信息 填写 "按钮 进行 提交 。 
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| 大量 本 情 砚 
上 员 责 人 姓名 * 
上 老人 有 效 证 件 基 型 6 二 - 
5 责 人 有 效 证 件 号 码 + 身份 焉 5 或)6 位 , 全 部 为 划 字 或 最 后 位 为 ! fz) 。 
ESE 
Em [Ee 
网 上 m 豆 有效 汪 件 原件 扫 指 件 上 传 介 份 这) 可 eaoecopia) 
必 有 搓 何 站 生 素 人 有 效 焉 半 号 码 ” 
网 责 人 办 公 昌 话 * 国营- 区 S -所 笑 8 码 ， 如 : 086-010-52398239 国家 代码 和 区 三 6 请 请 写 关 束 ) 
注意 : 主办 单位 性 质 为 “个 人 ”时 可 不 博 写 
EY “各 机 纪 到 ”与 “联通 于 机 且 到 "至少 要 汗 写 -项 
手机 呈 码 特别 提醒 请 EX 二 瑟 滞 记 的 联系 人 本 人 的 手机 号 码 ， 车 手机 号 码 博 写 丰 二 人 ， 视 为 备案 信息 过 各 ， 将 会 注 稍 各 案 屿 。 
We “相手 机 二 有 ”与 “联通 手机 号 码 ” 至少 轨 有 一 项 
页 人 电子 邮 往 * 
由 证件 备 主 (上 交管 





由 容 + 重合 合 门 户 因 单位 门 PM 站 自卫 视 习 片 自 网 站 建设 全 博客/ 个 人 空间 全 其 也 


键 议 标准 个 人 选择 " 其他”， 并 加 上 pRB 上 6 兽 主 进行 近 音 ) 





回 才 由 回 出 版 回教 育 固 医 六 作 扫 国药 品 和 医 广 澡 站 


























涉及 需 前 置 审批 或 专项 审批 的 内 容 
图 包子 公告 服务 回 文 化 要 广 播 电 她 视 节 电 
网 站 接 入 信息 
网 站 接 和 方式， 加 专线 加 三 机 托管 四 成 所 主机 (去 主机 ) 
TP 地址 列 吉 不 得 二 现 .0.0. 0 或 ec.163.1 等 基 时 不 真 立 的 ?地址 
如 有 多 个 以 换行 分 隔 
网 站 省 注 
上 6 首 主 
RH 内容 迁 “其 他 ” 时， 必须 博 SF3 沾 骤 务 内 容 具 伟 是 什么 。 
9-16 
【知识 讲解 】 
1. 关于 域名 


(1) 什么 是 域名 ? 

从 技术 上 讲 , 域 名 只 是 一 个 Internet 中 用 于 解决 地 址 对 应 问题 的 一 种 方法 。 可 以 说 只 
是 一 个 技术 名 词 。 但 是 ,由 于 Internet 已 经 遍及 世界 的 各 个 角落 ,域名 也 自然 地 成 为 一 个 社 
会 科学 名 词 。Internet 域名 是 Internet 网 络 上 的 一 个 服务 器 或 一 个 网 络 系统 的 名 字 , 在 全 
世界 没有 重复 的 域名 。 域 名 的 形式 是 由 若干 个 英文 字母 和 数字 组 成 .由 “. ?分 隔 成 几 部 分 ， 
如 ibm. com 就 是 一 个 域名 ,chinadns. com 是 一 个 国际 域名 。 无 论 是 国际 或 国内 域名 ,全 世 
界 接 入 Internet 网 的 人 都 能 够 准确 无 误 地 访问 到 。 从 社会 科学 的 角度 看 ,域名 已 成 为 
Internet 文化 的 组 成 部 分 。 从 商界 看 ,域名 已 被 誉 为 “企业 的 网 上 商标 ”。 没 有 一 家 企业 不 
重视 自己 产品 的 标识 一 一 商标 .而 域名 的 重要 性 及 其 价值 .也 已 经 被 全 世界 的 企业 所 认识 。 

网 络 是 基于 TCP/IP 协议 进行 通信 和 连接 的 ,每 一 台 主 机 都 有 唯一 标识 和 固定 的 IP 地 
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址 ,以 区 别 在 网 络 上 成 千 上 万 个 用 户 和 计算 机 。 网 络 在 区 分 所 有 与 之 相连 的 网 络 和 主机 时 ， 
均 采用 了 一 种 唯一 .通用 的 地 址 格式 , 即 每 一 个 与 网 络 相连 接 的 计算 机 和 服务 器 都 被 指派 了 
一 个 独一无二 的 地 址 。 为 了 保证 网 络 上 每 台 计 算 机 的 IP 地 址 的 唯一 性 ,用 户 必 须 向 特定 机 
构 申 请 注册 后 才能 分 配 IP 地 址 。 

网 络 中 的 地 址 方案 分 为 两 套 : IP 地 址 系统 和 域名 地 址 系统 。 这 两 套 地址 系统 其 实 是 一 
一 对 应 的 关系 。IP 地 址 用 二 进 制 数 来 表示 ,每 个 IP 地 址 长 为 32 比特 ,由 4 个 小 于 256 的 数 
字 组 成 ,数字 之 间 用 点 间隔 ,例如 100. 10. 0. 1 表示 一 个 IP 地 址 。 由 于 IP 地 址 是 数字 标识 ， 
使 用 时 难以 记忆 和 书写 ,因此 在 IP 地 址 的 基础 上 又 发 展 出 一 种 符号 化 的 地 址 方案 来 代替 数 
字 型 的 耳 地 址 。 每 一 个 符号 化 的 地 址 都 与 特定 的 IP 地 址 对 应 ,这 样 网 络 上 的 资源 访问 起 
来 就 更 容易 了 。 这 个 与 网 络 上 的 数字 型 IP 地 址 相对 应 的 字符 型 地 址 就 被 称 为 域名 。 

可 见 域名 就 是 上 网 单位 的 一 个 标识 名 称 , 是 一 个 通过 计算 机 登录 到 网 络 的 单位 在 该 网 
中 的 地 址 。 一 个 公司 如 果 和 希望 在 网 络 上 建立 自己 的 主页 ,就 必须 取得 一 个 域名 。 域 名 便于 
他 人 识别 和 检索 某 一 企业 、 组 织 或 个 人 的 信息 资源 ,从 而 更 好 地 实现 网 络 上 的 资源 共享 。 
除了 识别 功能 外 ,在 虚拟 环境 下 ,域名 还 可 以 起 到 引导 ,宣传 .代表 等 作用 。 

通俗 地 说 ,域名 就 相当 于 一 个 家 庭 的 门牌 号 码 ,别人 通过 这 个 号 码 可 以 很 容易 地 找到 
目标 。 

(2) 域名 解析 

注册 了 域名 之 后 如 何 才 能 看 到 自己 网 站 的 内 容 ? 用 一 个 专业 术语 表示 就 叫 * 域 名 解 
析 ”。 域 名 和 网 址 并 不 是 一 回 事 ,域名 注册 好 之 后 ,只 说 明 你 对 这 个 域名 拥有 了 使 用 权 , 如 果 
不 进行 域名 解析 ,那么 这 个 域名 就 不 能 发 挥 它 的 作用 ,经 过 解析 的 域名 可 以 用 来 作为 电子 邮 
箱 的 后 级 ,也 可 以 用 来 作为 网 址 让 用 户 访问 自己 的 网 站 ,因此 域名 投入 使 用 的 必 备 环节 是 
“域名 解析 ”。 域 名 是 为 了 方便 记忆 而 专门 建立 的 一 套 地 址 转换 系统 。 要 访问 一 台 互 联网 上 
的 服务 器 ,最 终 还 必须 通过 IP 地 址 来 实现 。 域 名 解析 就 是 将 域名 重新 转换 为 IP 地 址 的 过 
程 。 一 个 域名 只 能 对 应 一 个 IP 地 址 ,而 多 个 域名 可 以 同时 被 解析 到 一 个 IP 地 址 。 域 名 解 
析 需 要 由 专门 的 域名 解析 服务 器 (DNS) 来 完成 。 比 如 ,一 个 域名 可 以 实现 HTTP 服务 ,如 
果 想 看 到 这 个 网 站 ,要 进行 解析 ,首先 在 域名 注册 商 那里 通过 专门 的 DNS 服务 器 解析 到 一 
个 Web 服务 器 的 一 个 固定 IP 上 ,比如 为 211. 214. 1. x * x ,然后 通过 Web 服务 器 来 接收 
这 个 域名 ,把 这 个 域名 再 映射 到 这 台 服 务 器 上 ,那么 输入 这 个 域名 就 可 以 访问 网 站 的 内 容 
了 , 即 实现 了 域名 解析 的 全 过 程 。 人 们 习惯 记忆 域名 ,但 机 器 间 互 相 只 认 IP 地 址 ,域名 与 
IP 地 址 之 间 是 一 一 对 应 的 ,它们 之 间 的 转换 工作 称 为 域名 解析 .域名 解析 是 自动 进行 的 。 

(3) 域名 解析 的 类 型 

Q@ A 记录 。 又 称 IP 指向 ,用 户 可 以 在 此 设置 子 域名 并 指向 到 自己 的 目标 主机 地 址 上 ， 
从 而 实现 通过 域名 找到 服务 器 中 相应 网 页 的 功能 。 

说 明 : 指向 的 目标 主机 地 址 类 型 只 能 使 用 IP 地 址 。 

@ CNAME。 通常 称 为 别名 指向 。 可 以 为 一 个 主机 设置 别名 。 相 当 于 用 子 域名 来 代 
替 IP 地 址 ,其 优点 是 如 果 IP 地 址 发 生 了 变化 ,只 需要 改动 子 域名 的 解析 ,而 不 需要 逐一 改 
变 IP 地 址 解析 。 

说 明 : 

。 CNAME 的 目标 主机 地 址 只 能 使 用 主机 名 ,不 能 使 用 IP 地 址 。 
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。 主机 名 前 不 能 有 任何 其 他 前 组 ,如 “http://” 等 是 不 被 允许 的 。 
。 A 记录 优先 于 CNAME 记录 。 即 如 果 一 个 主机 地 址 同时 存在 A 记录 和 CNAME 记 
录 , 则 CNAME 记录 不 生效 。 

@@ MX 记录 。 即 邮件 交换 记录 。 用 于 将 以 该 域名 为 结尾 的 电子 邮件 指向 对 应 的 邮件 
服务 器 以 进行 处 理 。 如 ,用 户 所 用 的 邮件 是 以 域名 mydomain. com 为 结尾 的 , 则 需要 在 管 
理 界面 中 添加 该 域名 的 MX 记录 来 处 理 所 有 以 @mydomain. com 结尾 的 邮件 。 

说 明 : 

。 MX 记录 可 以 使 用 主机 名 或 IP 地 址 。 

。 MX 记录 可 以 通过 设置 优先 级 实现 主 辅 服务 器 设置 “优先 级 ”中 的 数字 越 小 表示 级 

别 越 高 ,也 可 以 使 用 相同 优先 级 达到 负载 均衡 的 目的 。 

@ NS 记录 

NS 记录 是 域名 服务 器 记录 (Name Server)。 其 用 来 表明 由 哪 台 服务 器 对 该 域名 进行 
解析 。 在 注册 域名 时 ,总 有 默认 的 DNS 服务 器 。 每 个 注册 的 域名 都 是 由 一 个 DNS 域名 服 
务 器 来 进行 解析 的 ,DNS 服务 器 NS 记录 地 址 一 般 以 下 面 的 形式 出 现 : 


nsl.domain.com 


ns2.domain.com 


说 明 : 
。“IP 地 址 /主机 名 ”中 既 可 以 填写 IP 地 址 ,也 可 以 填写 像 ns. mydomain. com 这 样 的 
主机 地 址 ,但 必须 保证 该 主机 地 址 有 效 。 如 将 news. mydomain. com 的 NS 记录 指 
向 到 ns. mydomain. com。 在 设置 NS 记录 的 同时 还 需要 设置 ns. mydomain. com 的 
指向 ,否则 NS 记录 将 无 法 正常 解析 。 
NS 记录 优先 于 A 记录 。 即 如 果 一 个 主机 地 址 同时 存在 NS 记录 和 A 记录 , 则 和 A 记 
录 不 生效 ,这 里 的 NS 记录 只 对 子 域名 生效 。 

2. 关于 虚拟 主机 

(1) 什么 是 虚拟 主机 

虚拟 主机 也 叫 * 网 站 空间 ”, 就 是 把 一 台 运 行 在 互联 网 上 的 物理 服务 器 划分 成 多 个 “ 虚 
拟 ? 服 务 器 。 这 是 互联 网 服务 器 采用 的 节省 服务 器 硬件 成 本 的 技术 ,虚拟 主机 技术 主要 应 用 
于 HTTP(Hypertext Transfer Protocol, 超 文本 传输 协议 ) 服 务 ,将 一 台 服 务 器 的 某 项 或 者 
全 部 服务 内 容 迎 辑 划 分 为 多 个 服务 单位 。 对 外 表现 为 多 个 服务 器 ,从 而 充分 利用 服务 器 的 
硬件 资源 。 

虚拟 主机 是 使 用 特殊 的 软 硬 件 技术 ,把 一 台 真 实 的 物理 服务 器 主机 分 割 成 多 个 逻辑 存 
储 单元 。 每 个 逻辑 单元 都 没有 物理 实体 ,但 是 每 一 个 逻辑 单元 都 能 像 真实 的 物理 主机 一 样 
在 网 络 上 工作 ,具有 单独 的 IP 地 址 (或 共享 的 IP 地 址 ) 、 独 立 的 域名 以 及 完整 的 Internet 服 
务 器 (支持 WWW 、FTP、E-mail 等 ) 功 能 。 

虚拟 主机 的 关键 技术 在 于 .即使 在 同一 台 计 算 机 、 同 一 个 操作 系统 上 运行 着 为 多 个 用 户 
打开 的 不 同 的 服务 器 程式 ,也 互 不 干扰 。 而 各 个 用 户 拥 有 自己 的 一 部 分 系统 资源 (IP 地址 、 
文档 存储 空间 .内存 .CPU 等 )。 各 个 虚拟 主机 之 间 完 全 独立 ,在 外 界 看 来 ,每 一 台 虚 拟 主机 
和 一 台 单 独 的 主机 的 表现 完全 相同 ,所 以 这 种 被 虚拟 化 的 逻辑 主机 被 形象 地 称 为 “虚拟 
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主机 ”。 
(2) 选择 虚拟 主机 的 注意 事项 
在 选择 虚拟 主机 时 ,可 以 从 以 下 几 个 方面 去 衡量 虚拟 主机 的 质量 : 
。 稳定 和 速度 ; 
。 均衡 负载 ; 
提供 在 线 管理 功能 ; 
。 数据 安全 ; 
完善 的 售后 和 技术 支持 ; 
IIS 限制 数量 ; 
。 月 流量 。 

(3) 虚拟 主机 的 分 类 

根据 建站 程序 来 分 ,可 以 分 为 ASP 虚拟 主机 、. net 虚拟 主机 、JSP 虚拟 主机 、PHP 虚拟 
主机 等 。 

根据 连接 线路 来 分 ,可 以 分 为 单线 虚拟 主机 、 双 线 虚 拟 主机 、 多 线 BGP 虚拟 主机 、 集 群 
虚拟 主机 。 

根据 位 置 分 布 来 分 ,可 以 分 为 国内 虚拟 主机 和 国外 虚拟 主机 等 。 

根据 操作 系统 来 分 ,可 以 分 为 Windows 虚拟 主机 和 Linux 虚拟 主机 。 

3. 关于 网 站 备案 

网 站 备案 是 指向 主管 机 关 报 告 事由 存 案 以 备查 考 。 从 行政 法 角度 看 备案 ,实践 中 应 用 
的 主要 是 《立法 法 》 和 《法 规 规章 备案 条 例 》 中 的 规定 。 网 站 备案 的 目的 就 是 为 了 防止 在 网 上 
从 事 非法 的 网 站 经 营 活动 ,打击 不 良 互 联网 信息 的 传播 。 如 果 网 站 不 进行 备案 ,很 有 可 能 被 
查处 从 而 导致 关 停 。 

(1) 概述 

网 站 备案 是 根据 国家 法 律 法 规 需 要 网 站 的 所 有 者 向 国家 有 关 部 门 申请 的 备案 ,主要 有 
ICP 备案 和 公安 局 备案 。 非 经 营 性 网 站 备案 (Internet Content Provider Registration 
Record) , 指 中 华人 民 共 和 国境 内 信息 服务 互联 网 站 所 需 进行 的 备案 登记 作业 。 

(2) 概念 辨析 

网 站 备案 是 域名 备案 还 是 空间 备案 ? 

域名 如 果 绑 定 且 指 向 到 国内 网 站 空间 就 要 备案 。 如 果 这 个 域名 只 是 纯粹 注册 下 来 用 作 
投资 或 者 暂时 不 用 ,是 无 须 备 案 的 。 域 名 指向 到 国外 网 站 空间 ,也 是 无 须 备 案 的 。 

辆 提示 : 2013 年 10 月 30 日 ,所 有 新 注册 的 . cn/. 中 国 /. 公司 /. 网 络 域名 ,将 不 再 设置 
ClientHold 暂停 解析 状态 ,对 已 设置 展示 页 的 域名 发 布 交易 .PUSH 过 户 、 域 名 信息 变更 、 
取消 展示 页 ,修改 DNS 解析 等 操作 ,域名 将 不 再 加 上 ClientHold 状态 。 但 解除 ClientHold 
的 域名 , 仍 需 备 案 通 过 才 可 以 做 解析 。 

(3) 网 站 备案 ICP 备案 和 域名 备案 的 区 别 

其 实 网 站 备案 就 是 ICP 备案 ,两 者 是 没有 本 质 区 别 的 , 即 为 网 站 申请 ICP 备案 号 ,最 终 
的 目的 就 是 给 网 站 域名 备案 。 而 网 站 备案 和 域名 备案 本 质 上 也 没有 区 别 ,都 是 需要 给 网 站 
申请 ICP 备案 号 。 网 站 的 备案 是 基于 空间 IP 地 址 的 ,域名 要 访问 空间 必须 要 求 能 够 解析 一 
个 IP 地址 。 网 站 备案 指 的 就 是 空间 备案 ,域名 备案 就 是 对 能 够 解析 这 个 空间 的 所 有 域名 进 
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(4) 服务 分 类 

互联 网 信息 服务 可 分 为 经 营 性 信息 服务 和 非 经 营 性 信息 服务 两 类 。 

经 营 性 信息 服务 ,是 指 通过 互联 网 向 上 网 用 户 有 偿 提 供 信息 或 者 网 页 制作 等 服务 活动 。 
凡 从 事 经 营 性 信息 服务 业务 的 企 事 业 单位 应 当 向 省 .自治 区 直辖 市 电信 管理 机 构 或 者 国务 
院 信 息 产 业主 管 部 门 申请 办 理 互 联网 信息 服务 增值 电信 业务 经 营 许可 证 。 申 请 人 取得 经 营 
许可 证 后 ,应 当 持 经 营 许可 证 向 企业 登记 机 关 办 理 登 记 手 续 。 

非 经 营 性 互联 网 信息 服务 ,是 指 通过 互联 网 向 上 网 用 户 无 偿 提供 具有 公开 人 性 .共享 性 信 
息 的 服务 活动 。 凡 从 事 非 经 营 性 互联 网 信息 服务 的 企 事 业 单位 ,应 当 向 省 自治 区 直辖 市 
电信 管理 机 构 或 者 国务 院 信息 产业 主管 部 门 申 请 办 理 备案 手续 。 非 经 营 性 互联 网 信息 服务 
提供 者 不 得 从 事 有 偿 服 务 。 在 隔 省 份 备 案 的 时 候 , 资 料 的 快递 费 是 由 备案 人 负责 的 。 

(5) 网 站 备案 

@ 备案 方式 。 公 安 局 备案 一 般 按 照 各 地 公安 机 关 指 定 的 地 点 和 方式 进行 。ICP 备案 
可 以 自主 通过 官方 备案 网 站 在 线 备案 或 者 通过 当地 电信 部 门 两 种 方式 来 进行 备案 。 

网 站 备案 的 目的 就 是 为 了 防止 在 网 上 从 事 非法 的 网 站 经 营 活 动 , 打 击 不 良 互联 网 信息 
的 传播 ,如 果 网 站 不 备案 ,很 有 可 能 被 查处 并 关 停 。 非 经 营 性 网 站 自主 备案 是 不 收 任何 手续 
费 的 。 

@ 注意 事项 如 下 。 

。 通信 地 址 要 详细 ,明确 能 够 找到 该 网 站 主办 者 。( 若 无 具体 门牌 号 ,请 在 备案 信息 中 
备注 说 明 * 该 地 址 已 为 最 详 ,能 通过 该 地 址 到 网 站 主办 者 ”) 
证 件 地 址 要 详细 ,按照 网 站 主办 者 证 件 上 的 注册 地 址 填写 。( 若 无 具体 门牌 号 ,请 在 
备案 信息 中 备注 说 明 * 该 地 址 按照 证 件 上 注册 地 址 填写 ,已 为 最 详 ”) 
网 络 购物 .WAP ,即时 通信 、 网 络 广告 .搜索 引擎 、 网 络 游戏 .电子 邮箱 有偿 信 息 、 短 
信 彩 信服 务 为 经 营 性 质 , 需 在 当地 管 局 办 理 增 值 电信 业务 许可 证 后 报 备 以 上 网 站 。 
非 经 营 性 主办 者 请 勿 随意 报 备 。 
综合 门户 为 企业 性 质 , 请 网 站 主办 者 以 企业 名 义 报 备 。 个 人 只 能 报 备 个 人 性 质 的 
网 站 。 
博客 .BBS 等 电子 公告 , 管 局 没有 得 到 上 级 主管 部 门 明确 文件 , 暂 不 受理 ,请 勿 随意 
选择 以 上 服务 内 容 。 
网 站 名 称 : 不 能 为 域名 、 英 文 .姓名 数字、 三 个 字 以 下 。 
网 站 主办 者 为 个 人 的 ,不 能 开办 “国字 号 “行政 区 域 规划 地 理 名 称 ” 和 “省 会 ”命名 的 
网 站 ,如 “中 国 XXxX 网 “四 川 X XX 网 ”或 “成 都 XX 网 ”。 
网 站 主办 者 为 企业 的 .不 能 开办 “国字 号 ”命名 的 网 站 ,如 “中 国 X XX 网 ”。 上 且 报 备 的 
公司 名 称 不 能 超 范围 ,如 公司 营业 执照 上 的 公司 名 称 为 ” 成 都 X X 网 ”, 请 勿 报 备 
“四 川 xX XxX 网 ”。 
网 站 名 称 或 内 容 车 涉及 新 闻 、 文 化 、 出 版 教育 、 医 疗 保健 、 药 品 和 医疗 器 械 、 影 视 节 
目 等 ,请 提供 省 级 以 上 部 门 出 示 的 互联 网 信息 服务 前 置 审批 文件 , 管 局 未 看 到 前 置 
审批 批准 文件 前 将 不 再 审核 以 上 类 型 网 站 的 备案 申请 。 

@ 备案 所 需 资料 。 单 位 主办 网 站 , 除 如 实 填报 备案 管理 系统 要 求 填写 的 各 备案 字段 项 
a2 
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内 容 之 外 ,还 应 提供 如 下 备案 材料 。 
网 站 备案 信息 真实 性 核验 单 。 
单位 主体 资质 证 件 复印 件 (加 盖 公 章 ) ,如 工商 营业 执照 .组 织 机 构 代 码 、. 社 团 法 人 证 
书 等 。 
单位 网 站 负责 人 证 件 复印 件 ,如 身份 证 (首选 证 件 ) 户口 每 、 台 胞 证 .护照 等 。 
接 入 服务 商 现场 采集 的 单位 网 站 负责 人 照片 。 
网 站 从 事 新 闻 、 出 版 教育、 医疗 保健 、 药 品 和 医疗 器 械 \ 文 化 ,广播 电影 电视 节目 等 
互联 网 信息 服务 ,应 提供 相关 主管 部 门 审核 同意 的 文件 复印 件 ( 加 盖 公 章 ); 网 站 从 
事 电 子 公 告 服务 的 ,应 提供 专项 许可 文件 复印 件 ( 加 盖 公 章 ) 。 
单位 主体 负责 人 证 件 复印 件 , 如 身份 证 户口 筹 、 台 胞 证 .护照 等 。 
网 站 所 使 用 的 独立 域名 注册 证 书 复印 件 ( 加 盖 公 章 ) 。 

个 人 主办 网 站 , 除 如 实 填 报 备案 管理 系统 要 求 填写 的 各 备案 字段 项 内 容 之 外 ,还 应 提供 
如 下 备案 材料 。 

。 网 站 备案 信息 真实 性 核验 单 。 

。 个 人 身份 证 件 复印 件 , 如 身份 证 (首选 证 件 ) 、 户 口 簿 、 台 胞 证 ,护照 等 。 

。 接 和 人 服务 商 现场 采集 的 个 人 照片 。 

。 网 站 从 事 新 闻 .出 版 .教育 .医疗 保健 ` 药 品 和 医疗 器 械 、 文 化 .广播 电影 电视 节目 等 
互联 网 信息 服务 ,应 提供 相关 主管 部 门 审核 同意 的 文件 (加 盖 公 章 ); 网 站 从 事 电子 
公告 服务 的 ,应 提供 专项 许可 文件 (加 盖 公 章 ) 。 

。 网 站 所 使 用 的 独立 域名 注册 证 书 复 印 件 。 

@ ICP 报 备 流 程 。ICP 信息 报 备 流程 图 如 图 9-17 所 示 。ICP 信息 报 备 流程 如 下 。 

步骤 一 : 网 站 主办 者 登录 接 人 服务 商 企业 侧 系统 

网 站 主办 者 进行 网 站 备案 时 可 有 三 种 登录 方式 供 选择 。 

方式 一 : 网 站 主办 者 登录 部 级 系统 ,通过 主页 面 * 自 行 备案 导航 "栏目 获取 为 网 站 提供 

接 入 服务 的 企业 名 单 (只 能 选择 一 个 接 入 服务 商 ), 并 进入 企业 侧 备案 系统 办 理 网 站 备案 
业务 。 

方式 二 : 网 站 主办 者 登录 住所 所 在 地 省 局 系统 ,通过 主页 面 “自行 备案 导航 ”栏目 获取 

为 网 站 提供 接 入 服务 的 企业 名 单 ( 只 能 选择 一 个 接 入 服务 商 ) ,并 进入 企业 侧 备案 系统 办 理 
网 站 备案 业务 。 

方式 三 : 网 站 主办 者 直接 登录 到 接 人 服务 商 企业 侧 系统 。( 编 者 推荐 使 用 此 种 方式 ) 

步骤 二 : 网 站 主办 者 登录 接 入 服务 商 企业 系统 自主 报 备 信息 或 由 接 入 服务 商 代为 提交 

信息 

网 站 主办 者 登录 到 企业 侧 系 统 , 注 册 用 户 一 填写 备案 信息 一 接 入 服务 商 校 验 所 填 信息 ， 

反馈 网 站 主办 者 。 

网 站 主办 者 委托 接 和 人 服务 商 代为 报 备 网 站 的 全 部 备案 信息 并 核实 信息 的 真 伪 -~ 接 人 服 

务 商 核实 备案 信息 一 将 备案 信息 提交 到 省 管 局 系统 。 
步骤 三 : 接 人 服务 商 核实 备案 信息 流程 
接 和 服务 商 对 网 站 主办 者 提交 的 备案 信息 进行 当面 核验 : 当面 采集 网 站 负责 人 照片 ; 
依据 网 站 主办 者 证 件 信息 核验 提交 至 接 入 服务 商 系统 的 备案 信息 ;填写 (网 站 备案 信息 真实 
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不 台 格 ， 退 回 














审核 结果 返回 1 
省 管 局 备案 系统 

















省 管 局 
审核 备案 信息 
合格 


1 
一 一 一 一 一 一 一 (生成 备案 ) 

| 备案 政 据 的 同步 
部 级 备案 系统 




















图 9-17 


性 核验 单 》。 如 果 备 案 信 息 无 误 , 接 人 服务 商 提交 给 省 管 局 审核 ;如 果 信 息 有 误 , 接 人 者 在 备 
注 栏 中 注 明 错 误 信息 提示 后 退回 给 网 站 主办 者 进行 修改 。 

步骤 四 : 网 站 主办 者 所 在 省 通信 管理 局 审核 备案 信息 流程 

网 站 主办 者 所 在 地 省 管 局 对 备案 信息 进行 审核 ,审核 不 通过 , 则 退回 企业 侧 系统 并 由 接 
入 服务 商 修改 ;审核 通过 ,生成 的 备案 号 、 备 案 密码 (并 发 往 网 站 主办 者 邮箱 ) 和 备案 信息 上 
传 至 部 级 系统 ,并 同时 下 发 到 企业 侧 系统 , 接 入 服务 商 将 备案 号 告知 网 站 主办 者 。 
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F343 


( 能 力 目标 


。 掌握 如 何 组 织 网 站 的 验收 工作 。 
。 能 够 根据 项 目的 实际 撰写 验收 报告 。 


/< 

\% 知识 目标 
。 熟悉 网 站 验收 工作 的 流程 。 
。 掌握 验收 报告 的 撰写 。 


任务 描述 





本 次 工作 任务 主要 组 织 客户 对 网 站 进行 验收 ,并 签署 验收 报告 以 结束 网 站 的 设计 开发 


工作 。 


通过 工作 任务 9 的 实施 ,网 站 已 在 互联 网 上 成 功 发 布 , 此 时 ,将 进行 最 后 一 个 环节 : 与 


客户 ( 问 道 茶 具有 限 公 司 ) 一 起 进行 网 站 的 验收 ,通常 验 
收 的 流程 如 图 10-1 所 示 。 

(1) 发 出 网 站 验收 通知 。 网 站 发 布 后 ,开发 方 告知 
客户 网 站 开发 完成 ,要 求 对 网 站 进行 验收 ,在 此 阶段 , 开 
发 方 应 准备 好 相关 的 验收 工作 ,如 准备 好 验收 报告 、 验 
收 地 点 .时 间 等 。 

(2) 客户 确认 。 客 户 在 收 到 通知 后 ,通常 会 根据 其 
工作 安排 ,确认 验收 的 时 间 、 地 点 等 。 

(3) 对 照 需求 对 网 站 进行 验收 。 在 验收 时 通常 
会 对 照 需 求 说 明文 档 逐 条 进行 验收 。 若 出 现 有 与 需 
求 说 明文 档 不 符 的 情况 ,验收 结果 为 未 通过 ,此 时 开 
发 方 应 根据 情况 进行 修改 。 若 验收 通过 , 则 双方 签署 
验收 报告 。 验 收报 告 的 签署 ,意味 着 网 站 设计 与 开发 


发 出 网 站 验收 通过 


| 客户 确认 





| 对照 需求 对 网 站 进行 验收 











签署 验收 报告 返回 开发 方 整改 














图 10-1 


工作 已 经 完成 ,客户 则 应 根据 网 站 建设 合同 支付 网 站 建设 的 余 款 。 


以 下 为 读者 提供 两 份 验收 报告 作为 参考 。 
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1. 网 站 验收 报告 参考 (1) 

网 站 验收 报告 

甲 方 (需求 方 ): 

乙 方 (开发 方 ); 

按 双 方 约定 ,针对 网 站 建设 交付 使 用 达成 协议 并 遵从 以 下 条 款 ,具体 约定 内 容 如 下 。 

1. 乙方 承接 甲 方 委托 网 站 建设 工作 ,已 于 年。 月 日 完成 设计 开发 ,经 试 运 
行 合格 ,交付 使 用 ,并 按 签订 协议 进入 阶段 。 

2. 鉴于 程序 设计 是 一 个 长 期 的 生命 周期 ,乙方 应 提供 甲 方 站 点 常规 性 修改 、 更 新 、 小 范 
围 改动 等 免费 维护 及 技术 支持 ,工作 量 小 于 一 个 工作 日 的 免费 维护 ;乙方 若 对 网 站 结构 模块 
有 和 较 大 改动 ,乙方 将 根据 实际 情况 收取 适当 的 费用 。 

3. 网 站 后 台 管 理 账号 为 ,密码 为 ,次 年 起 的 续 缴费 用 为 元 / 
年 (人 民 币 ) 。 

4. 甲 方 所 发 布 信息 不 能 涉及 非法 言论 ,反动 宣传 .虚假 广告 .赌博 、 贩 毒 、 色 情 、 恶 意 攻 
击 、 诽 谤 他 人 或 有 任何 误导 之 成 分 ,否则 由 此 引起 的 一 切 后 果 由 甲 方 自负 ,乙方 不 承担 任何 
连带 责任 。 

5. 乙方 不 得 泄露 所 设计 网 站 的 相关 安全 信息 ,恶意 人 为 、 误 操作 不 受 此 协议 保护 。 

6. 非 人 为 的 不 可 抗拒 力 破 坏 , 不 受 此 协议 保护 。 

第 一 条 : 验收 标准 
.页面 效果 是 否 真实 还 原 设 定 稿 。 

. 各 链接 是 否 准确 有 效 。 

.文字 内 容 是 否 正确 (以 客户 提供 的 电子 文档 为 准 )。 

.功能 模块 运行 是 否 正 常 。 

. 版权. 所有权 是 否 明确 。 

。 开 发 文档 是 否 齐备 。 

第 二 条 : 验收 项 目 

1. 使 用 的 域名 ,能 否 通过 连接 Internet 网 络 的 计算 机 正常 浏览 网 站 ? 

能 不 能 

2. 网 站 内 容 栏 目 是 否 完整 ? (以 双方 签订 合同 服务 项 目 为 审核 依据 ) 

完整 口 不 完整 

3. 网 站 内 容 以 下 部 分 是 否 有 误 : 

文字 口 没有 有 

链接 ” 口 没 有 有 

图 片 口 没 有 有 

4. 口 所 开发 的 系统 产品 能 否 正常 使 用 
5. 口 各 功能 模块 能 否 正 常 使 用 

6. 口 ICP 号 是 否 备案 
也 

8 











中 nm 













































































网 站 版 权 是 否 已 归属 甲 方 
域名 所 有 权 是 否 已 归属 甲 方 
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9. 口 网 站 是 否 可 以 进行 二 次 修改 

10. 口 网 站 数据 库 是 否 有 备份 机 制 

11. 口 网 站 信息 管理 员 ( 后 台 操 作 ) 是 否 已 培训 
12. 口 售后 服务 承诺 是 否 完善 

以 上 未 列 出 的 项 还 有 



































第 三 条 : 验收 确认 
经 甲 方 验收 审核 ,乙方 制作 的 甲 方 网 站 (域名 : ) 符合 甲 方 要 求 ， 
特此 认可 。 本 合格 书 由 双方 代表 签字 生效 。 
( 甲 方 签 章 ) (乙方 签 章 ) 


年 月 日 年 月 日 


2. 网 站 验收 报告 参考 (2) 


网 站 验收 报告 
( 甲 方 ) 与 科技 有 限 公司 (乙方 ) 签订 了 
网 站 建设 服务 合同 ”, 委 托 乙 方 开发 “ 网 站 ”， 


下 面 就 网 站 整体 进行 验收 。 

年 月 日 ,网 站 中 文 版 建设 完成 ,此 后 进行 了 一 系列 的 验收 测试 ,经 不 断 
地 查看 及 修改 ,双方 一 致 认为 本 网 站 设计 结构 合理 ,界面 美观 、 满 足 要 求 、 验 收 合格 ,同意 正 
式 交付 用 户 使 用 。 

验收 清单 如 下 : 





基本 情况 
项 目 名 称 
使 用 单位 
开发 单位 
开发 开始 日 期 
开发 结束 日 期 
网 站 域名 


























1. 使 用 域名 ,能 否 通过 连接 Internet 网 络 的 计算 机 正常 浏览 网 站 ? 
能 不 能 

网 站 内 容 栏 目 是 否 完整 ? 

完整 不 完整 














~ 
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3. 网 站 内 容 以 下 部 分 是 否 有 误 : 

























































































文字 没有 有 
链接 没有 有 

图 片 口 没有 有 
动画 /视频 口 没有 有 

4. 所 开发 的 系统 产品 能 否 正 常 使 用 。( 未 涉及 的 系统 功能 模块 请 留 空 ,不 做 选择 ) 
留言 反馈 系统 能 否 正常 使 用 : 能 不 能 
新 闻 发 布 系统 能 否 正常 使 用 : 能 不 能 
文章 管理 系统 能 否 正常 使 用 : 能 不 能 
在 线 联系 系统 能 否 正常 使 用 : 能 口 不 能 
在 线 招聘 系统 能 否 正常 使 用 : 能 口 不 能 
图 片 管理 系统 能 否 正常 使 用 : 能 口 不 能 
网 站 访问 统计 系统 能 否 正常 使 用 : 能 不 能 
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